The 'em' unit in web development is a relative length unit, meaning its size depends on the font size of the element it's applied to. One 'em' is equal to the current font size of the element. This makes it useful for creating scalable and responsive designs. For example, if the font size of a paragraph is 16 pixels, then 1em is equal to 16 pixels. If you set the font size of a heading within that paragraph to 2em, the heading's font size will be 32 pixels (16 pixels * 2). Using 'em' allows you to maintain proportions between elements regardless of the base font size. However, it can lead to nested element sizing complexities if not carefully managed due to inheritance. It's often paired with other units like 'rem' (root em), which scales based on the root element's font size, offering better predictability across a design.
What does the 'em' unit represent in CSS?
If the base font size is 10px and you set the font-size of an element to 2em, what will the element's font size be?
Which unit offers better predictability for scaling compared to 'em'?
What is a potential drawback of using the 'em' unit extensively?
Previous