DEV Community

Bosco Domingo
Bosco Domingo

Posted on

TL;DR CSS measurement units

#css #webdev #frontend #programming

A simple reference to check when in doubt about which unit to use.

Summary Table

Unit Relative To Best For
px Device Screen Fixed-size elements, border, box-shadow.
rem Root (<html>) font-size Modern standard. font-size, margin, padding, most layout values.
em Parent element's font-size Sizing elements relative to their own font-size (e.g., padding on a button).
vh/vw Viewport height/width Full-screen sections, elements sized relative to window height/width.
% Parent element's size Responsive layouts, sizing elements inside a container.

Simple takeaway (rule-of-thumb)

For most projects, a good strategy is:

  1. Use rem for font sizes and spacing (margin, padding).
  2. Use px for tiny, non-scalable values like border widths.
  3. Use %, vw, or vh for high-level layout containers. 
    <div style="font-size: 1.2em;"> <!-- Computes to 1.2 * 16px = 19.2px -->
      <div style="font-size: 1.2em;"> <!-- Computes to 1.2 * 19.2px = 23.04px -->
        Some text.
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

Table of Contents

  1. Table of Contents
    1. 1. Absolute Units
      1. px (Pixels)
    2. 2. Relative Units
      1. rem (Root em)
      2. em
      3. vh (Viewport Height) and vw (Viewport Width)
      4. % (Percentage)

1. Absolute Units

Absolute units are fixed and do not change based on any other element's size or screen settings. The most common absolute unit is the pixel (px).

px (Pixels)

  • What it is: A single pixel on the screen. 1px is one dot on your display.
  • Relative to: The device's screen resolution.
  • Use Case: Use px when you need a fixed size that should not scale. It's great for things like borders (border: 1px solid black;) or box-shadows where you want a crisp, consistent line.
  • Downside: Using px for everything, especially for font sizes and spacing, can harm accessibility. Users who have set a larger default font size in their browser will not see px-based text scale up, making it harder to read.

2. Relative Units

Relative units are flexible because they are measured in relation to another value. This makes them ideal for building responsive and accessible websites.

rem (Root em)

  • What it is: A unit relative to the font size of the root element (the <html> tag).
  • Relative to: The font-size of the <html> element. The browser default is typically 16px, so by default, 1rem = 16px.
  • Use Case: This is the most recommended unit for modern web development. Use it for font-size, margin, padding, width, height—almost everything. If a user changes their browser's default font size for better accessibility, your entire layout will scale proportionally.
  • Example: If the root font size is 16px, then font-size: 1.5rem; computes to 24px.

em

  • What it is: A unit relative to the font size of its direct parent element.
  • Relative to: The font-size of the parent element.
  • Use Case: Useful when you want an element's size to be based on its parent's font size. For example, setting the padding of a button in ems will make the padding scale with the button's text size.

  • Downside (The "Compounding" Effect): If you nest elements with em units, the sizes can compound in unexpected ways. For example:

    <div style="font-size: 1.2em;"> <!-- Computes to 1.2 * 16px = 19.2px -->
  <div style="font-size: 1.2em;"> <!-- Computes to 1.2 * 19.2px = 23.04px -->
    Some text.
  </div>
</div>

    This is why rem is often preferred, as it always relates back to a single, predictable source (<html>).

vh (Viewport Height) and vw (Viewport Width)

  • What it is: A percentage of the browser window's (viewport's) height or width.
  • Relative to: The viewport (the visible area of the web page). 1vh is 1% of the viewport height, and 1vw is 1% of the viewport width.
  • Use Case: Perfect for creating elements that should take up the full screen or a specific portion of it, regardless of the screen size. A common example is a hero banner that fills the entire screen.
  • Example: height: 100vh; will make an element exactly as tall as the current browser window.

% (Percentage)

  • What it is: A percentage of the parent element's corresponding property.
  • Relative to: The parent element.
  • Use Case: Mostly used for layout and sizing elements within a container. For example, setting width: 50%; on an element will make it half the width of its parent.
  • Difference from vw: width: 100% makes an element fill its parent container, while width: 100vw makes it fill the entire browser window's width, which can cause horizontal scrolling if the parent has padding.

Top comments (0)