CSS - Measurement Units

Ethan D. -

Absolute Units

Pixels (px)

Pixels (px) are a fixed-size unit used in CSS. They are the most basic and widely supported measurement unit. One pixel typically corresponds to a single dot on the screen, although this can vary depending on the device's screen resolution. Pixels are useful when you need precise control over element sizes and positioning.

Advantages of using pixels include their simplicity and consistency across devices. They allow for exact measurements and are easy to understand. However, pixels have some disadvantages. They do not scale well when the user zooms in or out of the page, which can affect accessibility. Using fixed pixel sizes can make it harder to create responsive designs that adapt to different screen sizes.

Points (pt)

Points (pt) are another absolute unit of measurement. One point equals 1/72 of an inch. Points are more commonly used in print media but can also be used in CSS. They provide a way to specify sizes that are relative to a fixed unit of measurement.

Compared to pixels, points are less commonly used on the web. They can be useful when creating styles for elements that will be printed, such as invoices or reports. However, points do not offer the same level of precision as pixels and may not always render consistently across different devices.

Inches (in) and Centimeters (cm)

Inches (in) and centimeters (cm) are absolute units borrowed from physical measurements. One inch equals 96 pixels at a screen resolution of 96 DPI (dots per inch). Centimeters are similar, with one centimeter equaling 37.8 pixels at 96 DPI.

These units are rarely used in web design because they do not suit screen-based media well due to varying monitor sizes and resolutions making it hard to predict how elements measured in inches or centimeters will appear accurately on screens.

Relative Units

Percentages (%)

Percentages (%) are relative units of measurement in CSS. They define sizes, spacing, and positioning of elements relative to their parent container. The size of an element set in percentages is calculated based on the size of its parent element.

Percentage Example

<div style="width: 50%;">This div occupies half the width of its parent container.</div>

Em (em)

Em (em) is a relative unit based on the font size of an element. One em equals the font size of the element. For example, if an element has a font size of 16 pixels and you set the padding to 1em, the padding will be equal to 16 pixels.

Em Example

<div style="font-size: 16px; padding: 1em;">This div has padding equal to its font size of 16 pixels.</div>

Rem (rem)

Rem (rem) is similar to em but is relative to the root element's font size (usually ). "Rem" stands for "root em".

The main difference between rem and em is that rem units are always based on root font size while em units are based on an element's own font size. This makes rem units more predictable and easier when dealing with nested elements.

Rem Example

<div style="font-size: 16px;"> 
    <div style="font-size: 2rem;">This div's font size is twice the root font size.</div>
</div>

Viewport Units (vw, vh, vmin, vmax)

Viewport units are relative measurements based on viewport size—the visible area of a web page:

  1. vw (viewport width): 1vw equals 1% of viewport width.
  2. vh (viewport height): 1vh equals 1% of viewport height.
  3. vmin (viewport minimum): 1vmin equals smaller value between vw or vh.
  4. vmax (viewport maximum): 1vmax equals larger value between vw or vh.

Viewport units help create elements that adapt to viewport dimensions regardless of screen size:

  • Setting an element's width at 50vw makes it occupy half viewport width.
  • Useful for full-screen sections or responsive typography adapting across devices and orientations.

Viewport Units Example

<div style="width: 50vw; height: 50vh;">This div occupies half the viewport's width and height.</div>

When to Use Each Unit

Choosing the right measurement unit in CSS depends on the situation and how you want elements to behave on your web page. Here are some guidelines for using absolute units versus relative units:

Use absolute units like pixels (px) when you need exact control over element sizes and positioning. Pixels are useful in these cases:

  • Creating fixed-width layouts
  • Defining borders and line thickness
  • Specifying exact dimensions for images and media elements

Avoid using pixels for font sizes, as they do not scale well when the user zooms in or out of the page.

Use relative units like percentages (%) when you want elements to adapt to their parent container's size. Percentages are helpful in these situations:

  • Creating responsive layouts that adjust to different screen sizes
  • Defining widths and heights of elements relative to their parent
  • Positioning elements using relative values (e.g., left: 50%; top: 25%)

Use em units when you want sizes relative to an element's font size. Em units work well for:

  • Setting padding and margins that scale with the font size
  • Defining sizes for nested elements that inherit the font size from their parent
  • Creating scalable typography that maintains proportions

Use rem units when you want sizes relative to the root element's font size. Rem units help with:

  • Defining font sizes and spacing consistently throughout the document
  • Creating scalable components independent of their parent's font size
  • Maintaining consistent proportions even if the root font size changes

Use viewport units (vw, vh, vmin, vmax) when you want elements to adapt to viewport size. Viewport units are good for:

  • Creating full-screen sections or hero images
  • Making typography responsive across different screen sizes
  • Defining sizes and spacing based on viewport dimensions

You can also combine different measurement units for more flexible designs.

Example: Combining units for flexibility

<div style="width: 50%; border: 2px solid black; font-size: 1rem; padding: 1em;"> 
    This element combines percentages for width, pixels for border thickness, rems for font size, and ems for padding.
</div>

The choice of measurement unit depends on your project's needs and how responsive you want it to be. Experiment with different units and combinations to find what works best.