In CSS, there are various units to specify sizes such as width, height, font size, distances, and other dimensions. Each unit has specific areas of application and properties and is therefore used individually as needed.

Let’s now look at the CSS sizes in detail:

Pixel as an absolute size

Pixel (px)

The pixel is probably the most commonly used unit in CSS and refers directly to pixels on a screen.

p {
  font-size: 14px;
  margin: 10px;
}

• Pixel (px) is therefore ideal for fixed layouts that should look similar on most devices.

• Creating an entire website in pixels does not make sense if it should be responsive in the end.

Relative Sizes

Percentage (%)

Percentage values (%) always refer to the size of a parent element.

.container {
  width: 960px;
  height: 600px;

.element {
  width: 20%;
  height: 10%;
}

The container (parent) with the class .container has a fixed size of 960 pixels (width) by 600 pixels (height) in this example.
The element (child) with the class .element adjusts to the size of the parent container by its respective percentage
width becomes 192px, because 20% of 960px is 192px
height becomes 60px, because 10% of 600px is 60px
Percent is useful for responsive designs, to adjust elements to the size of their containers.

Element (em)

The value em is based on the font size of the element it is applied to. If the font size is not specified, the font size of the parent element is used.

<p class=“text”>Lorem ipsum dolor sit amet</p>

p {
  font-size: 16px
}

.text {
  font-size: 0.75em;
  padding: 2.4em;
}

The class .text is assigned to the selector p
Regarding font size for .text:
p has been assigned a text size of 16px
.text has been assigned a text size of 0.75em
Since p is the parent element of .text, the size of .text is thus 0.75 * 16px = 12px
Regarding padding for .text:
Since .text inherited a text size of 12px
In practice, em is ideal for designs that need scaling based on font size.

Root Element (rem)

rem, similar to em, but always based on the font size of the root element (html).

html {
  font-size: 16px;
}
.header {
  font-size: 1.5rem; /* 24px */
}

rem is very good for responsive typography, as only the font size of the root element needs to be changed for adjustments.

Viewport Width (vw) and Viewport Height (vh)

These units refer to percentages of the width and height of the viewport.

.hero {
  width: 100vw;
  height: 50vh;
}

.modal {
  width: 80vmin;
  padding: 5vmax;
}

Viewport width and height are ideal for layouts that dynamically adjust to the size of the browser window.
Viewport Minimum (vmin) and Viewport Maximum (vmax) refer to the smallest or largest measure of width and height of the viewport.
Viewport, regardless of the case, is useful for elements that scale relative to the smallest or largest dimension of the viewport.

Other Units

cm, mm, in, pt, pc

These are more suitable for print media and rarely used on the web, as their display can vary greatly across devices.

Some tips for the proper use of CSS mesurements

px is often used when precise dimensions are required.
- Use px for borders, as they should remain constant.
%, em, rem, vw/vh are ideal for responsive web designs, as they allow adaptation to different display sizes.
- Use em for layout components that should scale in relation to font size.
- rem is recommended for font sizes and distances within the entire layout.
vmin/vmax offer special scaling options depending on the size of the viewport.
- vw/vh are great for large layout blocks or background images that should fill the entire viewport.

CSS mesure units and how to best use them