What are CSS Units?
CSS units are numeric type values that are used to determine the size of a property such as a margin, width, height, padding, font-size, and so on..
margin: 10px;
font-size: 24px;
padding: 12px;
width: 300px;
height: 300px;
Here margin
is the property and 10px
is the value of the property. px
is the CSS unit called pixel.
Three types of length used on CSS:
- Absolute
- Relative
- Viewport
Absolute units
Absolute units are fixed across everywhere else. Also, it remains absolute if the output device has a higher resolution. I am not relative to anything else, and I sit and always be the same size.
Here higher resolution output medium is a laser printer on a laser printer 1 cm of the units should be exact, 1cm. But on low-resolution devices such as computer screen results tend to be different. To see it in action, create a box with width: 3cm
and height: 3cm
and try to measure it with scale, you can visibly see the difference.
You may have had experience with absolute units in action. For example, while creating a print stylesheet for billing receipt or chance to work in Adobe InDesign, All print measurements are listed in absolute units. Because we create a book using InDesign so units should be absolute in order to print exactly what the output we need.
Absolute units are much more useful in printing books, documents, and defining print stylesheets.
Absolute units are:
cm
1cm = 96px/2.54
37.79527559055118px
mm
1mm = 1/10th of 1cm
Q
1Q = 1/40th of 1cm
in
1in = 2.54cm
96px
pc
1pc = 12pt = 1/6th of 1in
pt
1pt = 1/72nd of 1in
px
1px = 1/96th of 1in
Pixel 🎯
Pixels are recommended and widely used in screens. Pixels don't do anything with screen pixels. It is actually a visual angle unit. For more detailed information about pixel go through this article
Pixel in CSS
Pixels are used to fix the size of an element on the screen.
When to use absolute units?
As we have seen you should avoid absolute units, whenever we aim to create a responsive and flexible website. However absolute units are useful wherever we don't want to stretch the elements. Eg. Logo
Yay! That's all about absolute units.
Relative units
Relative units specify a length relative to another length which means, Relative units are relative to something else to the parent elements like the font or the size of the viewport.
The benefit of using relative units is that we can make the font size, padding or other elements scale relative to everything else on the page. Here are the most useful units in web development.
em 🎯
The default font size of the HTML document is 16px. So, 1em is equal to 16px. In CSS one em
is defined to be the value of font-size for a given font. If the font-size of an element is 14px
then the format of an element, 1em
is equal to 14px
.
If the user resizes their text or you decide to make font-size larger or smaller in your stylesheet the em length unit will scale proportionately.
In this example, let me show you how padding remains in proportion as I resize the font.
In the above example, I created two div elements with a class name of box1
and box2
. box1
have width and height set to 3em and has font size set to 16px. box2
has width and height set to 3em and font-size to 32px.
In the result section, you can see the two boxes were in a different size. But, here both, the div width is the same, but the font size is different. So, width and height scale proportionately. This is how em works relatively to its elements.
Here I'll show you another example of how em is relative to the parent element.
In this above example, both box1
and box2
classes have different font sizes. box1 class has font-size 16px and box2 has font-size 32px. You can see the difference in the width and height of the things
div element because each parent's font-size is different. So em
is relative to their parent elements.
rem 🎯
rem units are similar to em. But em uses and relative to current element font-size, rem uses and relative to the root element font size. By default root element font size is 16px. So 1rem is equal to 16px.
% percentage 🎯
The percent unit is relative to a parent size.
ex
ex unit is relative to the letter x-height of the current font used in an element.
ch
Represents the width, or more precisely the advance measure of the glyph "0" (zero the Unicode character U+0030) in the current element font.
Viewport units
CSS3 has super-duper units called viewport relative size units. These units are calculated based on the size of the viewport browser window, printable area mobile device display.
We describe viewport units make it possible to specify size relative to the reader window. It could be a phone, desktop, tablet, and so on..
Viewport units are vw, vh, vmin, vmax
vw (Viewport width)
The viewport width is 1/100th of the window's width. For example if your screen resolution is 1920 x 1080, 1vw = 19.2 pixel width. However, the browser calculates the viewport size as the browser window, which includes the scroll bar. The width of the viewport is larger than the width of the HTML element.
viewport > html > body
Therefore if we set an element 100vw, the element will extend outside the HTML and body element. Because of this nuance, when making an element span the entire width of the page, It is best to use the percentage unit rather than the viewport unit.
vh (Viewport height) 🎯
What do we do if we want to set child div height to the entire height of the screen? We specify parent element height to 100% and the child element height to 100% so we can get the expected output.
Here vh
come to rescue. We can specify vh
anywhere in your deeply nested child elements. it is still able to size relative to the viewport dimensions. For example, you can use vh
to set a full-screen parallax background.
vh > %
vmin
The unit is 1/100 of viewports width and height, whichever is lesser. For example, if your viewport is 937 pixels wide by 650 pixels tall, 1 vmin is equal to 6.5px
vmax
The unit is 1/100 of viewports width and height, whichever is greater. For example, if your viewport is 937 pixels wide by 650 pixels tall, 1 vmax is equal to 9.37px. This viewport is handy for creating full viewport interfaces.
That's all for CSS units. Have fun, and use appropriate units.
References
- https://developer.mozilla.org/en-US/docs/Web/CSS/length
- https://thecssworkshop.com/lessons/relative-units
- https://thecssworkshop.com/lessons/viewport-units
- https://bitsofco.de/viewport-vs-percentage-units/
- https://www.w3.org/Style/Examples/007/units.en.html
- https://www.w3.org/TR/css-values-4/
- https://flaviocopes.com/css-units/
- https://www.freecodecamp.org/news/css-unit-guide/
- https://css-tricks.com/the-lengths-of-css/
- https://hackernoon.com/the-best-css-unit-for-a-responsive-design-ku6q37to
- https://www.oreilly.com/library/view/css-the-definitive/9781449325053/ch04.html
- https://hackernoon.com/understanding-css-grids-fractional-units-fr-the-easy-way-5f43ee008f29
- https://css-tricks.com/introduction-fr-css-unit/
Top comments (0)