CSS em (em)
Em is a relative length unit equal to the specified font size. It was originally a typographic measurement based on the current typeface's capital letter M.[1] A measurement of 1em is defined by the font-size
of the element. In the example, we have a parent element purple
with the declaration font-size: 16px;
, and its child yellow
with font-size: 1.5em;
, which means that the child element's font size will be 24px.
Keep in mind that em units multiply upon themselves when applied to the font-size
property. For example, if we create a child element inside yellow
and set its font-size
to 1.5em, the actual font size will be 16 x 1.5 x 1.5 = 36px.
Em allows specifying a variety of typographic parameters like spacing, kerning or tracking, so they're proportional to the font size used.