What is the CSS em unit?

1. Definition of the em Unit

In CSS, the em unit is a relative unit, calculated relative to the element’s font size. Specifically, 1em is equal to the element’s font size. For example, if an element’s font size is set to 16 pixels, then 1em equals 16 pixels.

The advantage of the em unit is that it can dynamically adjust based on the font size of the parent element, thus achieving responsive web design. If you set the font size in em units, the element’s size will automatically adjust when the user changes the browser’s default font size.

2. Using the em Unit

The em unit can be used to define element dimensions, margins, font size, and other properties. The following describes how to use the em unit in these areas.

2.1 Defining Element Sizes

Using the em unit, you can define the width and height of an element. When you set the width or height of an element in em units, they will adjust automatically based on the element’s font size.

For example, the following CSS code sets the width of a div element to 2em and a font size of 16px:

div {
width: 2em;
font-size: 16px;
} 

In this example, if the parent element’s font size is 16px, the div’s width will be 32px (2em * 16px = 32px). If the parent element’s font size is 20px, the div’s width will be 40px (2em * 20px = 40px).

2.2 Setting Margins

The em unit can also be used to set margins. Margins include spacing in the top, bottom, left, and right directions of an element.

div { 
margin: 1em; 
} 

The above code sets the top, bottom, left, and right margins of a div element to 1em. If the div’s font size is 16 pixels, the margins will be 16 pixels (1em * 16px = 16px).

2.3 Font Size

Using em units to set font size allows fonts to adapt to element size.

For example, the following CSS code sets the font size of a paragraph element to 1em:

p {
font-size: 1em; 
} 

If the paragraph element’s font size is 14 pixels, the font size of this paragraph will also be 14 pixels (1em * 14px = 14px).

3. Comparison of em and Other Units

In CSS, in addition to the em unit, other units can be used to define dimensions, margins, and font sizes. Below is a comparison of the characteristics of the em unit and other commonly used units.

3.1 px Unit

The px (pixel) is an absolute unit, the smallest visible unit on the screen. Unlike the em unit, the px unit remains the same size across devices and does not adapt to font size or device resolution. Therefore, using the px unit to set dimensions or font sizes may cause display errors on some devices.

3.2

The rem unit, like the em unit, is also a relative unit. However, the rem unit is calculated relative to the font size of the root element (i.e., the html element). Therefore, the rem unit remains consistent throughout the document and is not affected by the font size of the parent element.

3.3 % Unit

The % (percent) unit is a relative unit; it is calculated relative to the dimensions of the parent element. Unlike the em and rem units, the % unit can be used to set properties such as width, height, and margins.

4. Practical Example

To better understand the application of the em unit, let’s take a practical example.

Suppose there is a div element containing two paragraphs. The first paragraph needs to have a font size of 12 pixels, and the second paragraph needs to have a font size twice that of the first.

The HTML code is as follows:

<div id="container">
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
</div>

The corresponding CSS code is as follows:

#container {
font-size: 16px;
}

#container p:first-child {
font-size: 12px;
}

#container p:last-child {
font-size: 2em;
}

In this example, the font size of the div element is set to 16 pixels, the font size of the first paragraph is set to 12 pixels, and the font size of the second paragraph is set to 2em, which is 32 pixels (16px * 2em = 32px).

Conclusion

The em unit is a relative unit of length based on the element’s font size. Using the em unit allows for responsive web design, allowing element dimensions and font sizes to automatically adjust based on the user’s device or browser settings. Compared to other units, the em unit offers greater flexibility and scalability. However, in practical use, be mindful of nesting em units to avoid unwanted effects.