CSS - Measurement Units: A Beginner's Guide

Hello there, future CSS wizards! ? Welcome to our magical journey into the world of CSS measurement units. As your friendly neighborhood computer teacher, I'm excited to guide you through this essential aspect of web design. Don't worry if you've never written a line of code before – we'll start from scratch and build our knowledge together!

CSS - Units

Length Units: The Building Blocks of CSS Measurements

Let's kick things off with the basics. In CSS, we use various units to specify the size of elements, margins, padding, and more. Think of these units as the rulers and measuring tapes of the digital world. They help us create websites that look great on all devices, from tiny smartphones to giant desktop monitors.

Here's a table of the most common CSS length units:

Unit	Description	Example
px	Pixels	16px
em	Relative to font size of the element	1.5em
rem	Relative to font size of the root element	2rem
%	Percentage	50%
vw	Viewport width	100vw
vh	Viewport height	50vh

Now, let's dive deeper into each of these units and see how they work in action!

CSS Measurement Units - em Unit

The 'em' unit is like a chameleon – it adapts to its surroundings. One 'em' is equal to the font size of the current element. This makes it super useful for creating scalable designs.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* This will be 24px */
  margin-bottom: 1em; /* This will be 24px as well */
}

In this example, the .child element's font size will be 24px (1.5 * 16px), and its bottom margin will also be 24px. It's like the .child is saying, "I want to be 1.5 times bigger than my parent!"

CSS Measurement Units - ch Unit

The 'ch' unit is a bit of a typography nerd. It's based on the width of the '0' (zero) character in the current font. This can be super handy for creating consistent layouts, especially with monospace fonts.

.code-snippet {
  font-family: 'Courier New', monospace;
  width: 40ch; /* Width of 40 '0' characters */
}

This will create a box that's exactly 40 characters wide – perfect for displaying code snippets!

CSS Measurement Units - rem Unit

The 'rem' unit is like the wise elder of the CSS family. It always refers to the root element's font size (usually the <html> tag), ignoring any parent elements' font sizes.

html {
  font-size: 16px;
}

.container {
  font-size: 20px;
}

.container p {
  font-size: 1.5rem; /* This will be 24px, based on the html font size */
}

In this case, even though the .container has a different font size, the paragraph inside it will still be 24px (1.5 * 16px from the root).

CSS Measurement Units - lh and rlh Unit

The 'lh' unit is based on the line height of an element, while 'rlh' is based on the root element's line height. These are newer units and great for creating vertical rhythm in your designs.

.paragraph {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1lh; /* This will be equal to the line height */
}

This creates a nice, consistent spacing between paragraphs based on the line height.

CSS Measurement Units - vh Unit and vw Unit

Now we're getting into the viewport units – these are my personal favorites! 'vh' stands for viewport height, and 'vw' for viewport width. They're percentages of the total viewport size.

.hero-section {
  height: 100vh; /* Full height of the viewport */
  width: 100vw; /* Full width of the viewport */
}

.half-width {
  width: 50vw; /* Half the width of the viewport */
}

These units are fantastic for creating responsive designs that adapt to any screen size. I once used them to create a fullscreen landing page that looked amazing on everything from phones to giant TV screens!

CSS Measurement Units - vmin and vmax Unit

'vmin' and 'vmax' are the dynamic duo of viewport units. 'vmin' uses the smaller dimension of the viewport, while 'vmax' uses the larger.

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

This creates a perfect square that's always 50% of the smaller viewport dimension – great for maintaining aspect ratios!

CSS Measurement Units - vb Unit

The 'vb' unit is based on the size of the viewport in the block direction (usually the height in horizontal writing modes). It's similar to 'vh' but adapts to different writing modes.

.vertical-text {
  writing-mode: vertical-rl;
  height: 100vb; /* Full height in vertical writing mode */
}

This is particularly useful for creating layouts that work well in both horizontal and vertical writing systems.

CSS Measurement Units - vi Unit

The 'vi' unit is the inline version of 'vb'. It's based on the size of the viewport in the inline direction (usually the width in horizontal writing modes).

.horizontal-scroll {
  width: 200vi; /* Twice the viewport width */
  overflow-x: scroll;
}

This creates a horizontally scrolling element that's always twice the width of the viewport.

Example - Percentages

Percentages in CSS are always relative to something. For widths, they're usually relative to the parent element's width.

.parent {
  width: 300px;
}

.child {
  width: 50%; /* This will be 150px */
}

Here, the .child element will always be half the width of its parent. It's like telling your element, "You can have half of what your parent has!"

Example - Numbers

Sometimes, you'll see CSS properties with no units at all – just numbers. These are typically used for unitless properties like line-height or opacity.

p {
  line-height: 1.5; /* 1.5 times the font size */
  opacity: 0.8; /* 80% opaque */
}

In this case, the line height will be 1.5 times the font size, creating nicely spaced text, and the opacity will make the text slightly transparent.

And there you have it, folks! We've journeyed through the land of CSS measurement units. Remember, the key to mastering these is practice. Try mixing and matching these units in your projects, and you'll soon develop an intuition for when to use each one.

Happy coding, and may your layouts always be pixel-perfect! ?✨

Credits: Image by storyset