Definition
The em unit of measurement is a relative one in web design and is based on the font size of the parent element. The parent element is the HTML element in whose context another element is embedded. For example, if the parent element has a font size of 16 pixels, 1em corresponds exactly to these 16 pixels, 2em is 32 pixels and 0.5em is 8 pixels.
A major advantage of em is its flexibility, as spacing and sizes can be designed proportionally to the font size of the parent element. This makes the unit particularly useful for responsive layouts, as it adapts dynamically to changing font sizes.
The disadvantage of em is its dependence on the font size of the parent element. In nested structures with different font sizes, it can happen that an element takes on unexpected sizes, as the values dynamically refer to the parent font size. These deviations can add up, making control and consistency in the design more difficult and code maintenance more complex.
Related topics
- rem: Unit of measurement