What is the difference between rem and em in CSS?

Differentiating rem from em in CSS

In CSS, font sizes can be defined using various units, among which rem and em are commonly encountered. While both units serve the purpose of setting relative font sizes, they differ in a crucial aspect: their relative reference point.

Understanding em

The em unit is relative to the font size of its parent element. This means that if the parent element has a font size of 14px, the child element with a font size of 1.4em will have a font size of 1.4 * 14px = 19.6px.

Understanding rem

In contrast, the rem unit is relative to a base font size. This base font size is typically set in the element or through a CSS variable. If the base font size is set to 16px, all rem values will be calculated relative to that size. Therefore, the child element with a font size of 1.4rem in our example will have a font size of 1.4 * 16px = 22.4px.

Impact on nested elements

This distinction becomes significant when dealing with nested containers that change their font sizes. Child elements defined in ems will inherit the changed font size from their parent, while those defined in rems will maintain their relative size to the base font-size.

Example

In the provided code snippet:

<code class="html"><div>Hello <p>World</p>
</div></code>

<code class="css">div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}</code>

The font size of the

element is set to 1.4rem relative to the base font size. The

element within the

also has a font size of 1.4rem, but it is relative to the font size of the

, which is 1.4 * 16px.

If we change the font size of the

to 20px, the font size of the

element will increase to 28px, as it is calculated as 1.4 * 20px. However, the

element's font size will remain at 22.4px, since it is relative to the base font size and not affected by the change in the

's font size.

The above is the detailed content of What is the difference between rem and em in CSS?. For more information, please follow other related articles on the PHP Chinese website!