Home >Web Front-end >CSS Tutorial >What is the difference between rem and em in CSS?
What is the difference between rem and em in CSS?
- Patricia ArquetteOriginal
- 2024-11-05 13:28:02715browse
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 within the
If we change the font size of the
element will increase to 28px, as it is calculated as 1.4 * 20px. However, the
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!