Margin and Padding Using Em

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



Leave a reply



Submit