The CSS units define the size or length of the property of an element. CSS units are used to set measurements. For example, if we want to define the property, such as padding an element, we would give it a specific value like 20 px or 2rem. CSS has many ways to express length like px, em, rem, ch, vh, etc.
The length of the property is a combination of numbers and units. So there should be no whitespace between number and unit. However, if the number is 0, then the unit can be omitted.
Even if it’s common to see units as px used, every developer has a big question: Which is the best unit to use and avoid? So in this blog, we will discuss the basics of all the units and some considerations you should make while choosing the units.
There are two categories of units: Absolute units and Relative units.
1. Absolute Units
Absolute units are fixed-length units. This means the size of an element remains the same regardless of the parent element and window size. Absolute units can be helpful when responsiveness is not the top priority in the project. For example, desktop applications cannot be resized and can be styled with the default dimensions. So If the window is not expandable, you don’t need the content too.
However, absolute units are not recommended because they are fixed-length units, and screen sizes vary extensively. So it’s better to avoid them in your projects.
Here is the list of all absolute length’s units.
i. Pixels (px)
Pixels form the basis of all things in CSS.i.e., px is the basic building block of the CSS. It measures the units in pixels. But pixels shouldn’t be the unit of your choice most of the time as they are very straightforward.
1px = 1/19th of in. However, the pixel is relative to the quality of the viewing screen.
ii. cm/mm/in
Centimeters, millimeters, and inches are the same for all screen sizes.
Cm measures the unit in centimetres. 1cm = 38px = 25/64th of in.
Mm measures the unit in millimeters. 1mm = 1/10th of 1cm.
Inch measures the unit in in. 1in = 96px = 2.54cm.
iii. pc/pt
Pt measures the unit in point. 1pt = 1/72th of in.
Pc measures the unit in picas. 1pc = 12pt that means 6pc = 1in.
2. Relative Units
Relative units are relative length units. It scales relative to its parent element or window size. They can be used as a default for responsive sites. Because of this, we don’t need to update a code or style for different window sizes.
However, determining which unit to use in a relative unit is a little more complicated than an absolute unit relative units are a little more complex than absolute units.
Here is the list of all relative length units.
i. Em
Em is relative to the current font size of the element and different for each element in the document. For example, 3em means 3 times the size of the current element.
ii. Rem
Rem stands for root em. This unit is relative to the font size of the root element. In rem, the parent font-size element has no effect. For example, <Html> element is the root element of the Html document, so 2rem is relative to the size defined in <Html> element.
iii. %
% are relative to the size of the parent element value. For example:
Div{ Width: 300px;}
Div p {Width: 50%;}
So the width of the second div will be 50% of the first div, i.e., 150px.
iv. vh and vw
vh is relative to the viewport’s height, and vw is relative to the width of view width. That means 1vh and 1vw is equals 1/100 of the viewport’s height and width.
v. vmin and vmax
vmin is relative to the viewport’s smaller dimension, and vmax is relative to the largest dimension of the viewport.
For example, if the viewport is in landscape mode, the smaller dimension is height, so vmin is relative to height, and vmax is relative to width as it is of the largest dimension.
vi. ch
ch unit is relative to the number of characters. This unit is defined as the width of the character zero in the current font. That means 1 character is equal to the width of the current font.
vii. ex
ex unit is relative to the current height of the current font’s lowercase x or the half of 1 em.
3. Conclusion
So for choosing the perfect CSS units for your project, you need to consider two things:
Whether you want to make your project responsive? And If yes, then relative to what property do you want to scale it?
So now it’s your turn to list out all the CSS units you use in the comment section below.
Happy Coding!
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
