CSS Units and Sizing

Units are essential for setting lengths, paddings, margins, aligning elements, etc.

This chapter will introduce you to some of the most common CSS units, including px, em, rem, percentages, and a few more.

Absolute Units

Absolute units are fixed and do not change relative to other elements. They are consistent regardless of the surrounding context, making them useful for specific, non-responsive design elements.

px (Pixels)

px: The pixel is the most common unit in web design. It represents a single dot on the screen. Pixels are precise and reliable for setting fixed dimensions.

.element {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: 10px;
}

Relative Units

Relative units are more flexible and responsive than absolute units. They scale relative to another value, such as the font size of the parent element or the viewport size.

em

em: The em unit is relative to the font size of the element itself or its parent element. If no font size is specified, it defaults to the browser's default font size, usually 16px.

/* Parent element with a font size of 16px */
.parent {
  font-size: 16px;
}

.child {
  width: 10em; /* 10 * 16px = 160px */
  padding: 1em; /* 1 * 16px = 16px */
}

rem (Root em)

rem: The rem unit is relative to the font size of the root element (<html>). This makes rem units more predictable and easier to manage for consistent scaling across the entire document.

html {
  font-size: 16px; /* Base font size */
}

.element {
  width: 10rem; /* 10 * 16px = 160px */
  padding: 1rem; /* 1 * 16px = 16px */
}

%

%: The percentage unit is relative to the parent element's dimensions. It is commonly used for widths, heights, paddings, and margins to create fluid and responsive layouts.

.parent {
  width: 400px;
}

.child {
  width: 50%; /* 50% of the parent width = 200px */
  padding: 10%; /* 10% of the parent width = 40px */
}

Viewport Units

Viewport units are relative to the size of the browser window. They are useful for creating responsive designs that adapt to different screen sizes.

vw (Viewport Width)

vw: 1vw equals 1% of the viewport's width.

.element {
  width: 50vw; /* 50% of the viewport's width */
  height: 25vw; /* 25% of the viewport's width */
}

vh (Viewport Height)

vh: 1vh equals 1% of the viewport's height.

.element {
  width: 100vw; /* 100% of the viewport's width */
  height: 50vh; /* 50% of the viewport's height */
}

## Example

Here's a practical example demonstrating the use of various CSS units in a responsive layout so you can see them compared to each other.

HTML:

<div class="container">
  <div class="fixed-element">Fixed Element (px)</div>
  <div class="relative-elements">
    <div class="parent">
      Relative Element (em)
      <div class="child">Child (em)</div>
    </div>
    <div class="element-rem">Relative Element (rem)</div>
    <div class="element-percentage">Relative Element (%)</div>
  </div>
  <div class="viewport-elements">
    <div class="element-vw">Viewport Width (vw)</div>
    <div class="element-vh">Viewport Height (vh)</div>
  </div>
</div>

CSS:

body {
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

.fixed-element {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  background-color: lightcoral;
  color: white;
  text-align: center;
  line-height: 60px;
}

.relative-elements {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.parent {
  font-size: 16px;
  padding: 10px;
  margin: 10px;
  background-color: lightblue;
}

.child {
  width: 10em;
  padding: 1em;
  background-color: lightgreen;
  margin-top: 10px;
  text-align: center;
}

.element-rem {
  width: 10rem;
  padding: 1rem;
  margin: 10px;
  background-color: lightseagreen;
  color: white;
  text-align: center;
  line-height: 1.5rem;
}

.element-percentage {
  width: 50%;
  padding: 10%;
  margin: 10px;
  background-color: lightpink;
  color: white;
  text-align: center;
  box-sizing: border-box;
}

.viewport-elements {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.element-vw {
  width: 50vw;
  height: 25vw;
  padding: 20px;
  margin: 10px;
  background-color: lightgoldenrodyellow;
  text-align: center;
  line-height: 25vw;
}

.element-vh {
  width: 100vw;
  height: 50vh;
  padding: 20px;
  margin: 10px;
  background-color: lightsteelblue;
  text-align: center;
  line-height: 50vh;
}

You can play around with this example on CodePen and change the values to start seeing them change.

CSS units are an essential foundation for any developer as they'll help you create those pixel-perfect finishes. It's worth taking your time to understand each so you know which is the right one for what you want to achieve.