What are the Most Common CSS Units?
Introduction
When defining the size of certain CSS properties, CSS provides multiple alternatives for which units to use. Learning all of your CSS unit options can be critical for styling in a way that is easy to manage and looks beautiful on every device.
What is a CSS Unit?
A CSS unit is used to establish the size of a property that we specify for an element or its content. CSS units are necessary to define measurements such as margin: 20px, where px (or pixel) is the CSS unit. They are used to specify margins, padding, and lengths, among other things.
Example:
p {
margin: 20px;
}
In this case, margin is the property, 20px; is the value, and px (or “pixel”) is the CSS unit.
CSS has two main types of units: absolute and relative length units.
Absolute Units
The absolute length units are fixed, and a length expressed in any of these will be displayed as that size.
Because screen sizes vary so greatly, absolute length units are not recommended for use on screen. They can, however, be used if the output medium is known, like in print layout.
Because absolute units do not scale when the screen size changes, they are less suitable for responsive sites.
The following are all absolute length units
Unit | Name | Equivalent to |
---|---|---|
cm | Centimeters | 1cm = 37.8px = 25.2/64in |
mm | Millimeters | 1mm = 1/10th of 1cm |
q | Quarter-millimeters | 1Q = 1/40th of 1cm |
in | Inches | 1in = 2.54cm = 96px |
pc | Picas | 1pc = 1/6th of 1in |
pt | Points | 1pt = 1/72nd of 1in |
px | Pixels | 1px = 1/96th of 1in |
Here is an example of an absolute unit – px
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
px – stand for Pixels. This is mostly designed for CSS and it is one of the most used absolute length.
Relative Units
Relative length units define a length in comparison to another length property. Relative length units scale well across various rendering mediums.
The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page.
The following are all relative length units
Unit | Description |
---|---|
em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
ex | Relative to the x-height of the current font (rarely used) |
ch | Relative to the width of the “0” (zero) |
rem | Relative to font-size of the root element |
vw | Relative to 1% of the width of the viewport* |
vh | Relative to 1% of the height of the viewport* |
vmin | Relative to 1% of viewport’s* smaller dimension |
vmax | Relative to 1% of viewport’s* larger dimension |
% | Relative to the parent element |
Here is an example of a relative length unit – rem
html {
font-size: 10px;
}
p {
font-size: 1.4rem; // This would be 14px (1.4 * 10px)
}
h1 {
font-size: 2.2rem; // 22px
}
In CSS rem stands for “root em”, a unit of measurement that represents the font size of the root element. This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout your UI.
Conclusion
A CSS unit is the unit of measurement used in CSS to express the size of a property on an element.
Absolute and relative length units are both acceptable. If you care about accessibility, though, relative length units should be your first choice.
Further reading
Do you want to know more about CSS? Then go here to read more articles.
For a more in-depth look at CSS values and units go over to MDN Web Docs- CSS values and units
Share this article. Follow me on Twitter for more updates.