CSS EM

The term "em" refers to an idea from the world of typography called an ephemeral unit. As an illustration, 1em in a font with 16 points is 16 points, 2em is 32 points, etc.

Em is a relative unit used in CSS to measure how big the current element is in comparison to its parent. The size of the current element is exactly 1em, which is doubled at 2em, tripled at 3em, and so on.

The font-size CSS attribute of HTML elements is where the em unit is most frequently used. Em can be used for any property where size is expected, such as padding, margin, line-height, height, width, max-height, and max-width.

How the Em Unit Operates

Let's take a moment to discuss the distinction between fixed and relative units in CSS so we can better grasp how the em unit functions.

CSS Fixed Units

No matter the screen size or resolution, we may specify the font-size property with a fixed unit if we want all browsers and devices to show the text in your HTML page (or a UX element inside it) with exactly the amount of pixels we've defined.

The default fixed unit in CSS for the font-size attribute of an HTML element is pixels. Suppose an element is given a font size of 12px, for instance. In that case, any text within that element and any of its descendant elements will, unless otherwise defined, have a font size of precisely 12 pixels.

CSS Relative Units

Instead, we should use a relative unit for the font-size property if we want browsers and devices to display the text in your HTML document with a variable size.

The font-size CSS property, as its name implies, sets the size of the text about that of its parent.

If the parent HTML element's font size is left blank, the browser searches upwards in the DOM tree for a fixed value. The browser's default value, usually 16px, is used if there are no fixed values anywhere in the DOM tree.

/* Fixed font size for the body */  
body 
{  
font-size: 17px; 
}  
/* Relative font size for the headings */  
h1 
{  
font-size: 6em; 
}  
h2 
{  
font-size: 4em; 
}  
h3 
{  
font-size: 5em; 
}

The body tag in the previous example has a fixed font size of 14px. Respectively:

The font size for the <h1> element is 4em, or 6 x 14px = px.
The font size for the <h2> element is 4em or 4 x 14px = 56px.
The font size for the <h3> element is 5em, or 5 x 14px = 70px.
Em units are practical since they save us the burden of including static values for every UI component in your CSS stylesheet.
Instead, we may set the <body> tag's font size to a fixed number or the default value for our browser, then let CSS inheritance take care of the rest.

What if we still needed to specify a 14-pixel font size for the body?

As we've already said, the majority of browsers would have the font size set to 16 pixels by default (unless, of course, the user or browser developer has chosen a different number).

Comparative Analysis

Finding it challenging to comprehend em in CSS?

There are others besides us. The fact that they are so, um, fleeting intimidates a lot of inexperienced web developers. Let's make a comparison to mathematics to (hopefully) make things simpler.

"em" becomes much simpler to grasp if you swap out em for x and think about your CSS expressions as mathematical calculations.

Say our DOM element's parent's font size is 14 pixels:

em = 14px

We use the following formula to determine 2em, 3em, 4em, and so forth:

em = 14px

2 em = 2 * 14 px = 28 px

3 em = 3 * 14 px = 42 px

Conclusion

The size of a CSS property is measured in terms of its parent's size using a relative unit called the em. If we only remember one thing from reading this article, make it that.

We no longer have to utilize preset font sizes everywhere by utilizing em to specify the font-size CSS property for our websites, making it simpler to scale and customize our designs.

Next TopicCSS Stylesheet

← prev next →