CSS Sizing Units

Juhi Sinha
Last Updated: May 13, 2022

Introduction

The beauty of things gets enhanced when it is in its proper dimension. In this digital era, it’s essential to organize the look of our websites, applications, line height, etc. The viewer feels it convenient to use our website if the content is in its correct size.

 

A responsive website dynamically adjusts to different screen sizes and viewports. To make one, we'll need a thorough understanding of various sizing units.

 

In this article, we’ll learn about different types of sizing units that are used in CSS properties. So, without any delay, let’s get started! 

Length and Dimension

Dimension refers to a numeric data followed by a unit. Length is a dimension related to distance that can be either absolute or relative.

 

In CSS, we can’t put whitespace between the number and its unit. But if the value is 0, then we may avoid the unit. 

 

Examples of length units in CSS are rem, px, etc.

 

In CSS, there are two different types of lengths:

  1. Absolute length
  2. Relative length

 

It's essential to understand the difference between the two. So, let’s see them one by one.

Absolute length

It refers to the fixed length. It isn’t measured in relation to anything else and is assumed to be the same size all the time. We use length in width, margin, height, padding, font size, etc.

 

Refer to the table below to see the various absolute length units with their description.

 

UnitDescriptionEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in

They are used when the output medium is known, such as for printing. 

Note: Absolute length units are not preferred for use on-screen because screen sizes vary, and their dimension doesn’t change with the varying screen sizes. 

Relative length 

Relative length units are described in comparison to another length property such as the viewport size, the parent element’s font size, etc. The advantage of using relative units is that you can scale the text or other elements on the page relative to everything else.

 

 The table below shows some of the most useful sizing units.

 

UnitRelative To
emThe font size of the element 
exThe x-height of the current font 
capHeight of capital letters in the present computed font size of the element.
chAverage character advance of a narrow glyph in the element's font (represented by the "0" glyph).
icAverage character advance of a full width glyph in the element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph.
lhThe line height of the element.
rlhThe line-height of the root (HTML) element.
remFont size of its root element (16px is default).
%Its parent element.

Viewport-relative units 

You can use the viewport’s dimensions, or we can say browser window as a relative unit. The table below lists some of the viewport units available for web development.

 

UnitRelative to:
vw1% of the viewport's width.
vh1% of the viewport's height.
vi1% of viewport's size in the root element's inline axis
vb1% of viewport's size in the root element's block axis.
vmin1% of the viewport's smaller dimension.
vmax1% of the viewport's larger dimension.

Now, let’s discuss in detail the most widely used CSS unit.

CSS em unit

This unit is dependent on the parent’s font size. It means that if the parent font size is 10px, then 1em = 10px. When em units are declared for child elements that don’t have a predefined font size, it will inherit the same font size from its parent, another ancestor element, or go to the document’s root element.

 

For example, the font size of the parent is 20px and font size of its child div is 2em i.e. 2 x 20px, 40px.

 

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em;
}

    

 

 

CSS rem unit

This unit is dependent on the root's font size. Unless we explicitly define it, any HTML document's default root size will be 16px. When it comes to margins and padding, this unit is handy. 

It is also a convenient unit for making responsive web pages. Simply modify the font size of the root element, and all other elements will adjust accordingly.

Percentage

It is always set relative to some other value. For example, if we set an element's font size unit in percentage, it will be a percentage of the font size of the element's parent. 

If we use a percentage for a height value, it will be a percentage of the height of the element's parent.

For example, the small rectangular box (blue) with percent class has 50% width of its parent container (yellow). 

.percent {
  width: 50%;
}

 

 

 

 

Angle units 

Angle units are helpful for the rotation of any element within transform functions. 

For example, a blue container without applying any rotation is shown below.

 

div {
width: 100px;
height: 100px;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Now, on applying rotation using transform:

 

div {
width: 100px;
height: 100px;
transform: rotate(60deg);
}

 

The output will be

 

Frequently Asked Questions

1). Which is the smallest CSS size unit?

Answer: The pixel(px) is the most often used smallest absolute unit. 

 

A pixel is commonly thought to be a single dot on a screen, but it is actually far more complicated. It is the smallest unit of measurement and is frequently used as a standard against which other units are measured.

 

2). How many types of CSS units are there?

Answer: There are two prominent types of CSS units: Relative and Absolute.

 

3). Which are the responsive units in CSS?

Answer: Relative units are considered as responsive units.

 

4). What is rem in CSS?

Answer: The rem is one of the important sizing units in CSS which means "The root element's font-size".

Key Takeaways

Although the web is a versatile medium, its dimensions may need to be adjusted to improve the overall quality of the experience. So, this article explained everything about dimension and sizing units in detail. A thorough understanding of these units will be helpful in developing awesome websites.

 

If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here.

 

Thank you for reading!

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think