CSS Units
📣 Sponsor
There are so many units in CSS these days, that it is hard to keep track, yet they're critical to laying out web pages. There have also been additional new units which have garnered a lot of browser support in recent years, making it easier to create with CSS, that many aren't aware of.
Let's take a look at CSS' unit and how to use them.
Pixels
Declared using px
, this is the most basic unit. Any CSS property which accepts a number or distance on a page, usually accepts pixels. However, it's not always the best choice. Here is an example:
div {
width: 10px;
}
Percent
Another common unit is %
, which refers to a portion of the elements with or height, depending on the direction you are going in. Note, height will not always work as expected, i.e. height: 50%;
on a body element will not make a 50% height page, unless a height is explicitly defined.
div {
width: 50%;
}
em/rem
1em
refers to font size of the curent element, while 1rem
refers to the font size at the base of the document. So if the body tag has a font size of 16px, then 1rem
means 16px.
Using both has their uses. Using em
let's us easily make objects bigger just by changing their font size, and everything else should scale appropriately. These don't just refer to font sizes though, they can be used on any property, i.e. width:
div {
width: 5rem;
}
These properties are already way better than just using pixels, since now you can scale entire documents using just font-size
, which makes accessibility a breeze. It also means, should a screen reader override the default root font size, your page will automatically adjust.
ch/ex
These
Traditional Units
We can also use more traditional units on web pages such as centimetres. Note, I would not recommend using these for web designs, but rather perhaps for prints or non-web design related CSS. That is because browsers and devices determine the definitions of these based on their own definitions of pixel density, which makes things very complicated.
Unit | Definition |
cm | Centimetres |
mm | Milimetres |
Q | Quarter-Millimetres |
in | Inch, typically 96px |
pt | Points, or 1/72 inch |
pc | Picas, or 1/6 inch |
in | Inch |
In Code:
div {
width: 1.5cm;
}
Viewport Width/Height Measurements
Perhaps one of the most useful units, and a more recent addition to CSS, vh
and vw
refer to 1% of the viewport's width and height respectively. Therefore a value of 100vw
will refer to the entire width of the current viewport.
The below div is the full width and height of the current viewport:
div {
width: 100vw;
height: 100vh;
}
vmin/vmax
vmin
and vmax
refer to the minimum or maximum value out of the viewport width or height. So if the viewport width is larger, then 100vmax
will refer to the full width of the viewport. This obviously depends on a window being resized.
Calculations
In CSS, it is often desirable to combine different units of measurement. One that I find myself using a lot is 100% of the width minus, say, 1rem. This can be achieved with calc()
, which accepts subtraction, addition, division or multiplication. A few examples are given below:
div {
width: calc(100% - 5rem);
height: calc(100vh / 2);
}
p {
width: calc(10rem * 5);
height: calc(5rem / 5);
}
Please note that in some browsers, spacing is important. So make sure you have spaces between the operators and the numbers, i.e. 100% - 5rem
, not 100%-5rem.
More Tips and Tricks for CSS
- How to make a child element appear behind its parent in CSS
- CSS Fonts
- How to Make your text look crisp in CSS
- How to do Deletion Animations with CSS
- CSS Text
- Using Only CSS to Recreate Windows 98
- How to vertically center text and HTML elements with CSS
- How to Create Animated Cards with WebGL and Three.js
- CSS Glass Morphism Generator
- CSS Positioning