CSS allows users to specify values with a variety of choices in choosing the unit. Usually the most recognizable was px, but there are more beyond that. To start with, units can be divided into two categories:
1- Absolute: the value will be fixed, no matter where it is used
2- Relative: the value depends on external factors or in respect to another property or element.
Under absolute units, we find cm, in, pt. Yet the most used unit is px, mainly for its simplicity. Since it is an absolute unit, regardless of the window size, elements, properties or hierarchy, a pixel will appear the same size in all cases, and a px is 1/96th of an inch.
*We need to note that 1 CSS pixel does not necessarily mean 1 physical pixel on the monitor.
The biggest drawback of px is that they are not scalable, which makes them not suitable to be used in responsive websites or in elements that depend on other properties (without the excessive use of media queries). For example, a title with a font-size: 32px may look well on a large screen, but how will it look on a smaller one?
Relative units come in handy in this case. Usually, developers avoid using relative units because of the unpredictable and changeable behaviour it shows and the abstraction it creates. Yet relative units make it possible to set the size of the elements relative to the base or parent elements, then in this case when a page is resized, all elements will be resized all at once.
First are ems, which have two different behaviours:
1- Ems used for properties other than font-size, then the current font size will be taken as a reference, which means 1 em is equivalent to the font size of the current element. For example:
.container{
font-size: 16px;
padding: 2em;
}
This means that the container will have a padding of 2 * its font size, which is 32px. If later the font size was changed, the padding will also change.
2- Ems used for font-size property, in this case, an inherited font size will be taken as a reference. For example:
.container{
font-size: 32px;
}
.child{
font-size: 0.5em;
}
This means that the child will have 0.5 * the parent’s font size, which will be 16px;
**Note that when ems is used for both font size and any other properties on the same element, first the browser will calculate the font size, then the resulted value will be used to calculate other properties.
The biggest drawback is when ems are used in nested elements, resulting in elements constantly shrinking or enlarging, and you need to go up the tree to find the value that was inherited from the parent’s parent’s parent’s … value.
We then need rem (root em) which is a relative unit, but relative to the root element not relative to the current element (like em), which means that 1 rem is equivalent to 1 * the font size of the root element.
Moreover, there are also viewport-relative units that define the value relative to the browser’s viewport, not relative to font-size (like ems and rems).
vh — 1% of the height of the viewport
vw — 1% of the width of the viewport
vmin — 1% of the smaller dimension, height or width
vmax — 1% of the larger dimension, height or width
**Note that using % in defining width or height is relative to the parent element, which by default excludes spaced for scrollbars for example.
Which unit is more convenient?
In a nutshell, it depends mainly on which elements you need to be responsive and relative to what, but you can consider this:
- rems for font size
- pixels for borders
- ems for properties like padding, height, width, or border-radius
That’s it! Thanks for reading, and I hope things are more clear with css units and the best of luck!
Regards,
Sarah
Top comments (0)