Margin and padding using em
When 1em is applied to an element, it takes the default value of the browser (usually, 16px) or the font-size value of its parent, right?
No, it takes its own font-size
, computed based on its parent (or the default browser-supplied value). Since the browser-supplied font-size
of h1
is 32 pixels, the resultant margin is 32 pixels.
However, using something like font-size: 100%; solves the discrepancy.
By setting font-size: 100%;
or font-size: 1em;
on an element, you're telling it to use 100% of the font size of its parent, so setting 1em
as a length on anything else will follow that 100%.
What is the difference between `margin` and `padding` in CSS?
TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.
To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.
Consider two elements one above the other each with padding of 1em
. This padding is considered to be part of the element and is always preserved.
So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.
Thus the content of the two elements will end up being 2em
apart.
Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.
So in this example, you will end up with the content of the first element followed by 1em
of combined margin followed by the content of the second element. So the content of the two elements is only 1em
apart.
This can be really useful when you know that you want to say 1em
of spacing around an element, regardless of what element it is next to.
The other two big differences are that padding is included in the click region and background color/image, but not the margin.
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }div.padding > div { padding-top: 20px; }div.margin > div { margin-top: 20px; }
<h3>Default</h3><div class="box"> <div>A</div> <div>B</div> <div>C</div></div>
<h3>padding-top: 20px</h3><div class="box padding"> <div>A</div> <div>B</div> <div>C</div></div>
<h3>margin-top: 20px; </h3><div class="box margin"> <div>A</div> <div>B</div> <div>C</div></div>
Should I define CSS margins in pixels or ems? Why? When?
em
units are used for better scalability of the page when the size of the elements depend on the page's scale. It's especially important for old browsers (e.g. IE6) and mobile platforms.
px
units are used for absolute values, while em
is relative to the font size of the particular element.1em
means one font-line, e.g. you have a box with font-size 12px
that means that 1em will be equal to 12px
Also, using px
seems easier because you know the exact value, but em
units inherit the value of their container.
<p>Text</p>
<div class="box">
<p>Lorem</p>
</div>
p {
font-size: 1.2em;
}
.box {
font-size: 1.2em;
}
In this case, the first <p>
will have font-size equal to the basic font-size * 1.2, and the second <p>
will display with font-size * 1.2 * 1.2.
How can I change h1 through h6 to have same padding as p using em instead of px while keeping them all the same?
You can use other unit like rem, ch, ex
What are pros and cons to use 'em' sizing unit for width, height, padding, margin, line-height in fixed width layouts?
The biggest downside is in indentation and text-block alignment with fonts of different sizes with em-sizing. It gets hard to line things up exactly – if that's important to you (and it should be).
Why use ems for padding & margins with browsers now scaling correctly?
EM (et al) units are not for view-port zooming - they are relative to the current font size. They are designed to work such that if I make my font very large (because my eyes are poor) or very small (because I am young and have the eyes of an eagle) I want the white-space around the text to scale with the text. Generally, one doesn't want 20 pt text with a 5 pixel margin between paragraphs, nor 10 pt text with a 50 pixel margin.
For example one wants text with approximately N lines of white-space between paragraphs. Using N em vertical margins achieves a spacing which adapts to the font size actually rendered.
In the modern web, em (et al) units still have their place; but they are not for everything. Essentially, you have to ask yourself, "should this size change with the font?"
Also, what if you decide to change your body-text font size? Many other layout values flow from that body-text size. Say you decide that the default browser viewing size of 16pt-18pt makes more sense than the 10pt size you are now using. If you have set the appropriate things with ems then when you increase the base everything else increases proportionately with it.
Related Topics
Change Background Image of Li on an A:Hover
Empty Div with Red Border Is Visible as a Red Line - How to Hide It Only with CSS
Fixed Position Misbehaviour in Ie11
Sass/Scss Object Key Value Loop
How to Change The Text Color of The Selected Row in Material UI Table
How to View Google Maps in "Print" Mode
Actionview::Template::Error (Variable @Fontawesomeeotpath_Iefix Is Undefined)
Space Between Bootstrap 3 Buttons
Applying CSS Rules Based on Input Checkbox Status
Negative Margins in CSS: Good Tutorial and Tricks Site
How to Style Django Validation Errors with Bootstrap
Align Material Icon Vertically
Is There Cross Browser Word-Wrap: Overflow-Wrap Solution
How to Make Image Responsive Inside a Div
How to Make an <A> 100% Height of <Li>