Table of contents
1.
Introduction
2.
Numbers
3.
Absolute Units
4.
Relative Units
5.
Browser Support
6.
Frequently Asked Questions
7.
Key Takeaways
Last Updated: Mar 27, 2024

CSS Sizing units

Author Kabir Singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

CSS has different properties that require their lengths to be specified. Some examples of these properties are font-sizepaddingmarginwidth, etc.

This length is basically expressed in a variety of units.

And this length can be defined as a number that is followed by the unit of the length that can be anything like 20px or 15em etc.

Let’s have a look at the example that shows us how we can provide length to our element properties in CSS.

Example

h1 {

. font-size50px;

}

p {

. font-size20px;

. line-height40px;

}

Considering this example, we can see a number after every property, but what does that number actually mean? Let's clear this question of ours by reading the next topic.

Numbers

Basically, the numbers that we use here are used to define line-heightopacity, and, moreover, the color values too.

Every number has a specific meaning that directly depends on its respective context.

Like if we specify the line height, then the number, when specified without a unit, represents the ratio.

p{

. font-size20px;

. line-height1;

}

Now when we define the lengths, these lengths are of two types, i.e., absolute and relative.

Let’s have a look at both types now and see how they work.

Absolute Units

The absolute units are hardcoded fixed sizes that can be used to express the lengths in a fixed size. 

Although these units are not recommended to be used on-screen as the screen size usually differs a lot. We can still use them if we already have the output medium, such as the printing layout.

Now let’s have a look at the different absolute units and their respective descriptions as well.

Unit

Description

cm

Length In Centimeters

mm

Length In Millimeters

in

Length In inches (1in = 96px = 2.54cm)

px

Length In Pixels (1px = 1/96th of 1in)

pt

Length In Points (1pt = 1/72 of 1in)

pc

Length In Picas (1pc = 12 pt)

 

Relative Units

Relative Units are used for styling or making a website responsive because they scale according to the parent element or the window size.  As the name suggests, the relative units are related to something. We use relative units when we want our content to depend on some other element. The most commonly used relative units are em, rem, ch, and ex. These units are font-relative units. The other most widely used unit is the % unit. The % unit is also dependent on some additional parent value. 

Let's have a look at the different relative units in detail. 

Relative Unit

Description

%

The % is relative to the parent element’s value. Percentage units are a key element in flexible grids. 

em

The em unit is relative to the font size of the parent.

rem

The rem unit is relative to the font size of the root element.

ch

The ch unit depends on the number of characters in an element. It is the advanced measure of the glyph “0” of an element's font. 

vh

The vh element is relative to the height of the viewport (window or app size). 1vh = 1% of the viewport’s height

vw

The vw element is relative to the width of the viewport. 1vw = 1 % of the viewport’s width.

vmin

The vmin unit is relative to the viewport's smaller dimension. 1vmin = 1% of the viewport's smaller dimension.

vmax

The vmax unit is relative to the viewport's larger dimension. 1vmax = 1% of the viewport's larger dimension.

ex

The ex unit is relative to the x height of the font's value.

 

Browser Support

The table specifies the individual browser versions that support the length unit completely.

Length Unit

Google

Chrome

Microsoft

 Edge

Mozilla

Firefox

Safari

Opera

vmax

26.0

16.0

19.0

7.0

20.0

vmin

20.0

12.0

19.0

6.0

20.0

vh, vw

20.0

9.0

19.0

6.0

20.0

rem

4.0

9.0

3.6

4.1

11.6

ch

27.0

9.0

1.0

7.0

20.0

em, ex, %, px, cm, mm, in, pt, pc

1.0

3.0

1.0

1.0

3.5

 

Frequently Asked Questions

  1. Which are VH units in CSS?
    VH basically stands for viewport height. It is relative to 1% of the height of the viewport.
     
  2. What are CSS Sizing Units?
    In CSS, we represent the various lengths using different units. CSS units explain the different sizes of a property we are setting for the element or the contents. 
     
  3. What is a viewport in CSS?
    The area that is visible on a window screen or the display of a mobile device is often referred to as the viewport.
     
  4. What is a viewport fit?
    Viewport Fit is a property that basically controls the display of a document on non-rectangular displays.

Key Takeaways

In this article, we had an excellent understanding of CSS size units. We were able to understand the types and the different lengths of CSS units too!

If you read the blog so far, you are completely familiar with all the sizing units and can use them in your code as well.

So, did you like this blog? And want to solve some interview questions for CSS? Here is a blog for you! Please have a look and also visit our platform Coding Ninjas Studio for more interview problems!

Happy Learning!

Live masterclass