Skip to content

Relative Units

Using relative units by default is recommended in the Style Guide because they can make layout spacing and element sizing more consistent and flexible. In the embedded example below, each <p>, <div>, and <img> is sized using one of the relative units recommended for this class:

  • % - Percentage relative to the parent element.
  • ch - The width of a character in the element's font size.
  • rem - Relative to the root element's font size (the browser default).

Notice that the elements styled using % are responsive to the width of the window. This is a key component of Responsive Design.

When testing responsiveness with embedded CodePen examples, you should open the Pen in its own window by clicking Edit On CodePen, then use your browser's Device Mode (Chromium-based) or Responsive Design Mode (Firefox).

See the Pen Relative Units (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.