Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm not sure if this is really the right place for this question, so if someone knows of a more appropriate StackExchange site, please share and I will be happy to move the question.
I'm currently trying to make it a habit to use relative measurements for CSS instead of px to accommodate the ever-increasing number of users who have ultra-high resolution monitors i.e. 4K.
In doing so, I got to thinking - should rem be used for everything that would have used px?
I'm currently finding that I'm using rem for border-radius, margin, padding, and font-size. After searching the interwebs for a bit, I couldn't really come up with any sort of guide for what is appropriate to use rem on, so I figured I would ask here - Are there any cases where you wouldn't want to use rem or em as the measurement for a property, but instead use px? Or is it pretty much just commonplace to use rem for everything?
rem is relative to the font size defined in the root node while em is relative to the font size of the current node.
I generally use rem for everything except if the value depends on the font size of the current element.
E.g. Given two versions of a H2 title: h2 with 40px and h2.large with 45px, then the bottom margin is relative to the size of the h2 element if you used em here.
I would use Pixels for small values such as border-width. The rendering is usually better.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I've recently started learning Wed Development online by myself and new to this area, so apologies for my basic query.
I know the difference between Margin and Padding (in a logical term) but not so sure 'when we should use Margin and Padding'... On a lesson, a lecturer used "Margin" to give some space between "Tick Icon" and "Easy to Use" text (see below images), but can padding be used here as well? If not, what might cause an issue if I use padding for this?
Also, she used "rem" for margin and "%" for padding. What are the difference between using rem and % (and px)?
Thank you very much for your help on this.
Margin is the space around elements.
Padding is the space around the elements contents.
So margin is outside the element.
Padding is inside.
You can use margin when you are placing elements near each other
You can use padding when you are changing how a element interacts with other elements.
(not a good explanation)
Also pixel is the pixels on the screen.
Rem is "Relative to font-size of the root element" (w3schools) https://www.w3schools.com/cssref/css_units.asp
Hope this helps.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I've seen many people suggesting setting *{ margin:0;padding:0;}. It does prevent lots of unexpected margin/padding on the page.
But if it's first thing we ought to implement every time we create a CSS file, why do the browsers bother to set default element margin/padding other than 0?
I guess giving a default margin makes sense to elements like <p> to keep the paragraph spacing. But again, if we are suggested to put the * reset every time, the browsers' default settings don't matter anyway, right?
There really is no exact answer to your question. But, the most logical reason to put a preset margin and padding is to most likely make webpages automatically more appealing to the user. If you see a website with text right up against the side of a page, it starts to look a little stretched and sketchy. So, to counter this, they set a margin and padding.
Bryce
A <h1> in example unfortunately has a browser-specific margins (see specific to the browsers). Setting margin/padding to 0px is a poor version of a normalizer that redesign all css to a clean cross-browser design from what you can start to write css that let the browsers render the same style.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
This sounds like a silly question and it probably is but I'm building a website on top of Bootstrap and it uses 14px font size as a default. There is a lengthy discussion of various font sizes / line heights here but only 16px is mentioned as a possibly better value than 14px, never 15px.
When testing my site, 14px looks too small and 16px too big. 15px seems like a sweet spot but it is so rarely used that it leaves me wondering whether it might possibly cause some issues later on? Or is it just a matter of preference that most people decide between 14px and 16px and ignore 15px?
I'd imagine 16px and 14px are just preference given that they divide easier than odd numbers. If say you were to use em instead of px later on and wanted something to be .5 em or .25em, 14 and 16 px divides nicely compared to 15px. This may cause problems when those ems are converted back to pixels later on, but I don't think it would be much of an issue
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Is it better for responsive design to set a border-radius in ems rather than px?
Ive read that column and media query widths are better as ems than pixels for a more responsive design, however ive never heard of someone using ems for border radius.
em is always better for responsive design and you can convert it here http://pxtoem.com/
Yeah you can use ems for border radius , is it better for responsive than px ? , eh debatable .. because its not always the case , when your screen is small or relatively large it will look not look so good or aesthetic , but responsive design wise , its better to use ems than px
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
In what cases these are useful?
table-layout
font-stretch
font-size-adjust
orphans and widows
marks
clip
orphans and widows are used commonly in print to avoid a single line at the bottom or top of a page.
More info can be found here just do a quick search
http://www.w3schools.com/Css/pr_tab_table-layout.asp
I use table-layout: fixed a fair amount, but the others not so much. I've found that table-layout: fixed, along with <col> tags will speed up the rendering of a page with a very large table because the browser doesn't need to process the contents of all data in the table to calculate column sizes. It is also useful to have two tables with columns that align perfectly.
Clip looks like it could be useful, but I haven't used it before. A good article on clip is here:
http://www.ibloomstudios.com/articles/misunderstood_css_clip/
Orphans, widows, and marks are useful in print stylesheets I believe. And the font ones are for scaling height/width of fonts. I'm not sure how supported any of those are, but table-layout is well supported.