CSS “em” issue: avoid scalling to font-size of specific element

Question

My site is almost totally designed in "em" (as opposed to px). It is supposed to be much better for modern browsers.

Most of the text is font-size:1em. 1em = 16px by default, I didn't specify it.

But I have some content where font-size is 1.2em and other which is 0.8em (for example for H1 or for small buttons).

The issue with "em" is that it re-scale all the sizes of an element (margin, padding, height...) according to the font-size.

I have the specific code in my CSS:

/* Reset */
html [and many other elements] {
    font-size: 100%;
    font: inherit;
}
/* Design */
body {
    font-size: 1em;
    line-height: 1; /* Line height will equal the em of each element */
}
.small-button {
    font-size: 0.8em;
    margin-left: 1em;
}
.normal-button {
    font-size: 1em;
    margin-left: 1em;
}

The normal-button has a margin of 1x1x16 = 16px. But the small-button has a margin of 1x0.8x16 = 12.8px.

Apparently this is a specific "em" property (it would not be the case in "px") which scales everything according to the font-size of the element.

This example is simple; but on my website it makes things really hard for me to keep things consistent.

How can I de-activate this property so that in the example above the 2 buttons have the same margin ? (without re-calculating the sizes; which is what I am doing right now!)

Answer 1

It is the purpose of the em unit that it is relative to the currently set font size. If you want to use an consistent form of em, use the unit 'rem'. It is relative to the root element of your page (most likely your html tag) and stands for root em.

Check out this article by Jonathan Snook if you want to learn more about it. http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

Personally, I set my "master unit" in the body and proceed in multiples of 10s. I hate 16pt as stock, because I don't want to use a chart to set my font sizes the sizes I want them.

body { font-size:10pt; }

As far as particular elements, keep in mind that if you have an element (say a ul) with a size of 1.2em, and the li set to 1.0, and your body is 10pt, then the li is actually based off it's parent container, so it would be 1.2em instead of 1.0(aka 10pt as set in the body), because it's parent is 1.2em.

If you have something that you want a specific size throughout (such as a main menu), I suggest you forgo the em method on that particular parent object (or the li themselves) and use a set px or pt method.