Units in CSS

Syntax for CSS units.

Most values require the unit to be specified. Failure to do so most of the time makes the rule invalid. It is only when the value is 0 that we can dispense with specifying the unit.

The unit is inscribed after the numerical value, without spaces:
Examples : 12px, 45deg, etc.

Table of Contents.

• Absolute dimension units.
• Relative Dimension Units.
• Viewport Relative Dimension Units.
• Units of Dimension Relative to Font Size.
• Dimension units that can be used in container queries.
• Angle units.
• Resolution units (usable in media queries).
• Units of time or duration (mostly used to define animations).
• Frequency units (usable for sound reproduction).
• Sound volume units (usable for sound reproduction).

Absolute dimension units.

These units can be used for anything that is a dimension: width and height of a block, margins, font size, etc.

They are absolute units in that the value is not calculated relative to any other dimension.

Relative Dimension Units.

These units cause a computation from another dimension. For example, a margin of 25% measures a quarter of the dimension of the parent element.

Relative units are increasingly being used to create layouts that adapt to more and more diverse screen sizes (from the screen from a mobile phone to the TV screen). The term "responsive" refers to a layout that is perfectly adaptable to the size of the screen.

Elements sized in fr distribute the remaining space in the grid container according to their fr value.

In the example below, observe that the last two columns occupy all the remaining space to the right of the first column, and that column 3 is always twice as wide as column 2.

Viewport dimension units.

New Viewport Units.

Why did the W3C introduce these nuances? Because browsers can show or hide certain elements to give the page as much space as possible. This is especially the case on mobiles: the address bar, scroll bars, etc. are only displayed when they are useful.

This dynamic display management can impact the size of the elements defined in relation to the viewport, which requires recalculation each time the layout. These units were created to prevent this.

Units that start with L (Large) refer to the largest possible ViewPort dimension, when all optional elements are masked. Items whose dimensions are set with these units can be slightly hidden when an accessory is displayed.

Conversely, those that start with s (small) refer to the smallest dimension of the viewport, when all optional elements are displayed. Elements whose dimensions are defined with these units will never be hidden regardless of the accessories that the browser can bring to light, but when these elements disappear, the occupancy of the available space is less good.

Finally, those that start with d (dynamic) refer to the current dimension of the viewport. The dimensions defined with these units therefore evolve according to the elements that are displayed or hidden. These units have none of the disadvantages mentioned above, but require the layout to be recalculated each time an element is displayed or masks.

The elements below have their height defined in each of the units. The difference is not significant, and will probably be invisible on a screen computer because few visual elements are optional (the address bar is always displayed for example). But on a mobile, the block defined In swh must be slightly lower than the others.
By bringing up the address bar (by scrolling the screen slightly), only the block defined in dvh should change height.

Non-specific units like vw, vh, vi, and vb are equivalent to respectively lvw, lvh, lvi and lvb.

Dimension units relating to the size of the characters.

em
rem

The unit of character size of the parent element.

Unity relative to the size of the root element.

Setting all character sizes to em or rem is a good solution to dynamically change the font size (magnifying glass function) because it is then enough to change the size of the characters of the root element so that the size of all the characters on the page is set Up to date.
The root element can be designated either by the html selector or by the :root pseudo-class.

ex
rex ⚠

The unit relative to the height of the parent element's lowercase x.

Unit relative to the height of the root element's lowercase x characters.

cap
rcap ⚠

Unit relative to the height of the capital letters of the element itself.

Unity relative to the height of the capital letters of the root element.

lh
rlh ⚠

A unit relative to the height of a line of text in the element itself.

Unit relative to the height of a line of text in the root element.

ch
rch ⚠

Unit relative to the width of the 0 of the element itself.

Unit relative to the width of the 0 of the root element.

Units relative to the width of the digit zero (0).
This unit can be used, for example, to define the width of an input area. Viewing the CSS code, you'll notice that we've added 8 pixels, which correspond to the thickness of the borders and padding (padding).

Postal code:

 

ic
ric ⚠

The unit relative to the width of the 水 character in the font of the element itself.

The unit relative to the width of the 水 character in the root element font.

This unit is of course used mainly for texts in the language CJK.

Dimension units that can be used in container queries.

Container queries allow you to define conditional styles based on the dimensions of a container element. Refer to the @container page for a detailed presentation of container queries.

Angle units.

Corner units are mostly used for transformations, but a few other properties accept angular values. For example, font-style to set character skewing, linear gradient functions, color hue rotation functions, etc.

Resolution units.

These units of resolution are used by media queries. Refer to the @media directive for more details.

Duration Units.

These units are mostly used to set the duration of animations or transitions.

Frequency Units.

These units are used primarily for sound reproduction.

Sound volume unit.

Unit used for sound reproduction.