What are ems in CSS?
In CSS, an em unit is equal to the computedfont-size
for the element to which the em is applied. When em units are declared on child elements that don’t have a font-size
defined, they will inherit their font-size
from their parent, or from another ancestor element, possibly going all the way back to the root element on the document.
Look at the following CSS:
.example {
font-size: 20px;
}
In this case, 1em on this element, or on its child elements (assuming no other font-size
definitions), would be equal to 20px. So if we added a line:
.example {
font-size: 20px;
border-radius: .5em;
}
This border-radius
value of .5em
computes to 10px (i.e. 20*.5). Similarly:
.example {
font-size: 20px;
border-radius: .5em;
padding: 2em;
}
The padding value of 2em
is equal to 40px (20*2). As mentioned, this type of calculation would apply to any child elements as well — unless any of those child elements had an explicitly defined font-size
value, in which case the em value would be calculated based on that. If no font size is defined anywhere in the CSS, the em unit will be equal to the browser’s default font size for the document, which is usually 16px.
I think that should make it clear how ems work. Now let’s look at how this technique can be used to make easily resizable web components, as discussed by Simurai in the original Medium article. I’ll take his idea a step further by providing a demo to see this in action.
When to use em in CSS
Em units works well with modular CSS techniques such as component-level styling or encapsulated sections of code in general. For example, they can be used to ensure that a component’s (e.g. a card’s) elements are all sized relative to each other, and allow it to be easily resized. The technique basically works like this: Thefont-size
property is used, as Simurai refers to it, as a “trojan horse”, creating the base unit for the various elements inside our component, or module. Since em units, as described above, are calculated based on the root-defined font-size
on the parent element, this makes the entire component easily resizable by simply changing the font-size
on the parent element.
Let’s look at this in action in a CodePen demo:
See the Pen Using ems for resizable components by SitePoint (@SitePoint) on CodePen.
This silly little module has four basic elements in it. Nothing fancy, just an example to illustrate this technique. Move the range slider at the top of the demo page to change the size of the module. You can also test it at full screen. The range slider is hooked onto a single value on the root element for the component: Thefont-size
value.
It should be noted here that the purpose of making the component resizable using this single CSS property is not necessarily so that the user can do this. It’s mainly so that the developer maintaining the module can make adjustments quickly, without fiddling with the different values in all parts of the component.
As described in the previous section, as the font size changes, this trickles down to all the em values that are set on that parent element as well as to all of its child elements, making all parts of the component proportionally flexible.
If you examine the CSS, you’ll notice the following:
- Everything inside the component is sized with ems, except the outside border (which we want to remain at 2px at all times), and the image, which I could resize if we wanted it to, but I’m happy with its size being static for this case.
- The teardrop-like thing in the top right corner is a pseudo-element, which likewise benefits from the base
font-size
on the parent. - The CSS also includes two media queries that adjust the
font-size
on the parent. Again, this shows the usefulness of this technique because you don’t have to change all the various sizes in the media queries, but only thefont-size
.
Some Notes, Flaws, etc.
As you can see from using the range slider in the demo, this type of flexible resizing isn’t always something you’ll want to use. It can be somewhat restricting. You may have to tweak some of the em values to get them how you like, and, as in the case of the parent border in the demo, you may not want the resize-ability to apply to all elements. You can overcome this easily by simply avoiding ems on the elements you want to leave out. As described in the discussion on Simurai’s original article, you don’t have to use px units to set the rootfont-size
. You can use ems for that too, but just remember that this will be inherited in the same way from its parent, possibly coming from the document’s default value for font-size
.
What About rems and Sass?
The rem unit in CSS always inherits its value from the base font size setting on the root element of the document, irrespective of the computed font size. In HTML, the root element is always thehtml
element. So you could use rems, but this would mean you’ll have to control all components on the page using the font size on that element. It could work on certain projects, but I think this technique works best when focusing the resizability on an isolated component, rather than the whole document.
As for using a preprocessor like Sass, I think that’s a side point. Ultimately, your compiled stylesheet will use whatever units you’re using in your Sass code, and the inheritance will work the same way.
Conclusion
As already mentioned, Simurai deserves the credit for making this technique more widely known. Of course, as he mentions, this is nothing new and the basic concept has been used by many experienced developers for years — but maybe not so much in the context of web components, or modules. As Simurai says, I think this is a nice method to use when building a CSS framework or library of components, and, if nothing else, I think the technique really drives home the point about how powerful em units are. Em is not the only CSS unit available, of course. Check out our Overview of CSS Sizing Units.Frequently Asked Questions (FAQs) about EM Units in CSS
What is the difference between EM and REM units in CSS?
Both EM and REM are relative units in CSS, but they differ in the way they calculate their values. EM is relative to the font-size of its closest parent, or the current element. This means if you set an element’s font-size to 1.2em, it will be 1.2 times the size of the parent’s font-size. On the other hand, REM is relative to the root, or the html element. So, if you set an element’s font-size to 1.2rem, it will be 1.2 times the size of the root element’s font-size. This makes REM more predictable and easier to control than EM.
How do I convert pixels to EM units in CSS?
To convert pixels to EM units, you need to know the base font-size of your document. The default base font-size in most browsers is 16px. So, if you want to convert a pixel value to EM, you divide the pixel value by the base font-size. For example, if you want to convert 18px to EM, you would do 18/16 = 1.125em.
Why should I use EM units instead of pixels in CSS?
EM units offer several advantages over pixels. They are scalable, meaning they adjust based on the user’s default browser settings or the settings of their device. This makes your website more accessible to users with visual impairments who may need to increase the font size. EM units also allow for more flexible and responsive design, as they adjust based on the parent element’s font-size.
Can I use EM units for properties other than font-size in CSS?
Yes, you can use EM units for any property in CSS that accepts numerical values, not just font-size. This includes properties like width, height, padding, margin, and line-height. Using EM units for these properties can help maintain proportional relationships in your design.
How do I set the base font-size for EM units in CSS?
You can set the base font-size for EM units by setting the font-size property on the html element. For example, if you want the base font-size to be 18px, you would write: html { font-size: 18px; }. All EM units in your CSS will then be relative to this base font-size.
What happens if I nest elements with EM units in CSS?
If you nest elements with EM units, the child element’s size will be relative to the parent element’s size. This can lead to compounding effects, where the size of the child element becomes larger or smaller than expected. To avoid this, you can use REM units, which are always relative to the root element’s size.
Are there any disadvantages to using EM units in CSS?
While EM units offer many advantages, they can also be more difficult to manage than absolute units like pixels. Because EM units are relative, their actual size can change based on the context. This can make it harder to predict the size of elements, especially in complex layouts with nested elements.
How do I override the size of an element set in EM units in CSS?
You can override the size of an element set in EM units by setting the size in a more specific selector. CSS follows a specificity hierarchy, where more specific selectors override less specific ones. For example, an ID selector will override a class selector, and a class selector will override a type selector.
Can I use EM units in media queries in CSS?
Yes, you can use EM units in media queries. In fact, using EM units in media queries can improve the responsiveness of your design. Because EM units are relative, they adjust based on the user’s default browser settings or the settings of their device. This means your media queries will adapt to the user’s settings, not just the viewport size.
How do I calculate the size of nested elements with EM units in CSS?
To calculate the size of nested elements with EM units, you multiply the parent element’s size by the child element’s size. For example, if the parent element’s size is 1.5em and the child element’s size is 2em, the actual size of the child element would be 1.5 * 2 = 3em. This is because the child element’s size is relative to the parent element’s size.
Louis is a front-end developer, writer, and author who has been involved in the web dev industry since 2000. He blogs at Impressive Webs and curates Web Tools Weekly, a newsletter for front-end developers with a focus on tools.