DEV Community

Cover image for CSS Length Units
Ritvik Dubey
Ritvik Dubey

Posted on • Updated on

CSS Length Units

This is a short and informative article. This article is about CSS length units.
Here are some units that you might know, but I recently got to know about them and I was amazed to know about that they exists.
In CSS there are many types of values, we will talk about numeric values and in numeric value we will specifically talk about length values.

LENGTH

The most frequently used numeric type is length. There are number of CSS properties that takes length some of them are width, height, margin, border etc. Length value is a number followed by a length unit. Length value can be zero, positive value and in some cases negative values.

There are two type of length units

1. Absolute Length

These units are the fixed length units or you can say constant units. These units will give you same size no matter what is the change in size of screen. These units must be used for print layout.
Alt Text
So I was amazed to know about cm(centimeter). Actually I was amazed to know about all these absolute length units except cm. We mostly use px(pixels) but we are also friendly with cm if you want you can give it a try. (It was tough for me to believe so I gave it a try πŸ˜›)

<body>
    <div id="container">
    </div>
</body>
Enter fullscreen mode Exit fullscreen mode
#container {
    width: 5cm;
    height: 5cm;
}
Enter fullscreen mode Exit fullscreen mode

2. Relative Length

Relative length units are relative to something else for e.g. siz of parent element, viewport size etc. These units are very helpful as you change the screen size the size of elements changes relatively. So relative length units makes development more comfortable to us.
Alt Text
I personally recommend using vw, vh, along with vmin.
The difference between relative and absolute length units will be more clear from example below.

<body>
    <div id="container">
      <div id="for-px">
        <h1 id="px-h1">For px</h1>
      </div>
      <div id="for-vw">
        <h1 id="vw-h1">For vw</h1>
      </div>
    </div>
</body>
Enter fullscreen mode Exit fullscreen mode
#for-px {
  width: 150px;
  height: 50px;
}
#for-vw {
  width: 20vw;
  height: 20vh;
}
Enter fullscreen mode Exit fullscreen mode

In this example we have two divs for-px and for-vw. The for-px will remain same when you change the screen size but in case of for-vw if we change screen size then we will observe a relative change. (If you are reading it in mobile then change browser setting to desktop-site to see the difference and if you are reading it in PC you can change screen size to see the change)

Source:- MDN web docs
Cover:- Rajat Gour

Thank you for reading.

Please feel free to share your views about it.

I hope you liked it and found it helpful.

Connect with me on Twitter or LinkedIn

My personal blog blog.ritvikdubey.com

Top comments (2)

Collapse
 
ljcdev profile image
ljc-dev • Edited

Déjà vu 🀣! (This comment will be updated soon)
Great article buddy 😁. Saw ur post on hashnode first.

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Can't let my streaks breakπŸ˜‚πŸ˜‚πŸ˜‚