CSS - Measurement Units

Hello there, future web designers! Today, we're going to embark on an exciting journey through the world of CSS measurement units. As your friendly neighborhood computer teacher, I'm here to guide you through this essential aspect of web design. So, grab your virtual rulers, and let's measure up some CSS!

Length Units

In CSS, we have various ways to measure and define sizes. It's like having a toolbox full of different rulers, each perfect for specific tasks. Let's start with the basics:

Absolute Length Units

These are the straightforward ones, like the inches on your ruler:

Unit	Description
px	Pixels
in	Inches
cm	Centimeters
mm	Millimeters
pt	Points
pc	Picas

Here's a simple example:

.box {
  width: 100px;
  height: 2in;
  margin: 10mm;
}

In this code, we're creating a box that's 100 pixels wide, 2 inches tall, with a margin of 10 millimeters all around. It's like building a tiny, precise cardboard box!

CSS Measurement Units - em Unit

Now, let's talk about the 'em' unit. It's a relative unit, based on the font size of the element. Think of it as a chameleon that changes size based on its surroundings.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* This will be 24px */
  padding: 2em;     /* This will be 48px */
}

In this example, the child's font size is 1.5 times its parent's, and its padding is twice its own font size. It's like a Russian nesting doll of sizes!

CSS Measurement Units - ch Unit

The 'ch' unit is based on the width of the '0' (zero) character. It's particularly useful for creating column layouts in monospace fonts.

.code-block {
  width: 80ch;
  font-family: monospace;
}

This creates a code block that's 80 characters wide, perfect for those nostalgic for the days of 80-column terminals!

CSS Measurement Units - rem Unit

'rem' stands for "root em". It's similar to 'em', but it's always relative to the root element (usually

), not the parent.

html {
  font-size: 16px;
}

.box {
  font-size: 1.5rem; /* Always 24px, regardless of parent */
  padding: 2rem;     /* Always 32px */
}

This is great for maintaining consistent sizing throughout your document, like having a master blueprint for your entire website.

CSS Measurement Units - lh and rlh Unit

'lh' stands for "line height" of the element, while 'rlh' is the "root line height". These are newer units, perfect for vertical rhythm in typography.

.paragraph {
  line-height: 1.5;
  margin-bottom: 1lh;
}

This sets the margin below the paragraph to exactly one line height, creating a harmonious vertical rhythm. It's like conducting an orchestra of text!

CSS Measurement Units - vh Unit and vw Unit

'vh' and 'vw' stand for "viewport height" and "viewport width" respectively. They're percentage units based on the size of the viewport.

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

This creates a hero section that always fills the entire screen, no matter the device size. It's like having a responsive billboard that always fits perfectly!

CSS Measurement Units - vmin (viewport minimum) and vmax (viewport maximum) Unit

These units are based on the smaller or larger dimension of the viewport, whichever is appropriate.

.square {
  width: 50vmin;
  height: 50vmin;
}

This creates a perfect square that's always half the size of the smaller viewport dimension. It's like having a shape-shifting square that always looks proportional!

CSS Measurement Units - vb Unit

'vb' stands for "viewport block size". It's similar to 'vh', but it respects the writing mode of the document.

.sidebar {
  width: 20vb;
}

This creates a sidebar that's always 20% of the block dimension of the viewport, which is great for multilingual sites with different writing directions.

CSS Measurement Units - vi Unit

'vi' is the "viewport inline size". It's like 'vw', but again, it respects the writing mode.

.header {
  height: 10vi;
}

This creates a header that's always 10% of the inline dimension of the viewport, adapting to different writing modes seamlessly.

Example - Percentages

Percentages in CSS are always relative to something. Let's see them in action:

.container {
  width: 80%;
  margin: 0 auto;
}

.child {
  width: 50%;
  padding: 5%;
}

Here, the container is 80% of its parent's width, centered with auto margins. The child is half the width of the container, with padding that's 5% of the container's width. It's like Russian nesting dolls, but with invisible boxes!

Example - Numbers

Sometimes, CSS properties don't need units at all. Let's look at some examples:

.box {
  opacity: 0.5;
  line-height: 1.5;
  z-index: 100;
}

Here, opacity is a value between 0 and 1, line-height is a multiplier of the font size, and z-index is just a plain number for stacking order. It's like having a volume knob, a text spacer, and a layer sorter all in one!

And there you have it, folks! We've journeyed through the land of CSS measurement units, from the familiar pixels to the exotic viewport units. Remember, choosing the right unit is like picking the right tool for the job - it can make your life easier and your designs more robust. So go forth and measure responsibly!

Credits: Image by storyset