CSS Units

2.3. CSS Units#

In CSS, units define the dimensions, spacing, and overall layout of elements on a webpage. They tell the browser how big or small to make things like fonts and layout attributes, which we’ll learn about next such as margins and padding.

Units can be:

  • absolute, providing fixed measurements, or

  • relative, adjusting based on other elements.

2.3.1. Absolute Units#

Common absolute units are:

  • px which represents 1 pixel

  • mm which is a millimetre

  • pt which represents 1/72 of an inch.

When applying to font-size, these :term:`units <CSS unit>` affect the height of the :term:`font`.

<p style="font-size: 10px;">
   This paragraph has a font size of 10 pixels.
</p>
<p style="font-size: 10pt;">
   This paragraph has a font size of 10 points.
</p>
<p style="font-size: 10mm;">
   This paragraph has a font size of 10 millimeters.
</p>

2.3.2. Relative Units#

  • em, which is multiplier of the size of the parent element (e.g. 3em is 3 times size of the current font)

  • rem, which is a multiplier of the size of the root element

  • %, is the percentage of the size of the parent element

  • vh and vw, is the percentage of the height and width of the viewport.

Note

Viewport refers to the size of the browser window.

2.3.3. Glossary#

CSS unit#

A CSS unit is a measurement used to define sizes, spacing, and layout in a stylesheet, such as px, em, rem, or %.