CSS · Lesson 6

Units

Measuring sizes that fit any screen

Every size in CSS needs a unit, like the px you have used so far. Different units answer one question differently: "compared to what?"

What you'll learn

  • The difference between fixed sizes (px) and sizes that follow something else.
  • How %, em and rem size things compared to a parent or the page.
  • How vh and vw size things compared to the browser window.

Let's measure things

A unit is the word after a number, like px in 16px. Some units are fixed: they stay the same everywhere. Others are relative: they are a part of something else, like the box an element sits in or the size of the screen. Relative units help a page fit both phones and computers.

Think of asking a carpenter for a shelf. You can give an exact length: "140 centimeters". That shelf is the same length in any room, like px. Or you can say "half the wall". In a small room, the shelf comes out short. In a big room, it comes out long. That's like %: the size depends on what it sits in.

The brown shelf is fixed: 140 pixels in both rooms. The green shelf is relative: half of whatever wall it's on.

A closer look

px: pixels

px is a fixed size. 16px is 16 pixels on a phone and on a big monitor. It's a good choice for borders and small, exact spaces. For big widths, fixed sizes can be a problem: a 600px box is too wide for most phones.

%: part of the parent

% is a part of the box the element sits in, called its parent. width: 50%; is half the parent's width, so the box gets narrower on a phone and wider on a computer.

em and rem: compared to text size

em and rem are based on text size. rem means "root em": it's compared to the text size of the whole page, set on <html>, which is usually 16px. So 1.5rem is 24px everywhere on the page. em is compared to the element's own text size. That's handy for padding: padding: 0.5em 1em; on a button grows when the button's text grows. Watch out with em in font-size: there it means the parent's text size, so boxes inside boxes can keep getting bigger.

vh and vw: parts of the window

vh and vw are parts of the browser window, which is called the viewport. 1vh is 1% of the window's height, and 1vw is 1% of its width. min-height: 100vh; makes a section at least as tall as the screen. A title in vw grows and shrinks as the window changes width.

Which one to use?

  • Text size: rem, so all text follows one page setting.
  • Borders and small spaces: px.
  • Widths of boxes: %, often with a max-width in px or rem.
  • Padding that follows text size: em.
  • Full-screen sections: vh and vw.

Let's build it

Let's size a Front Page Bytes page using a different unit in each step. Each code box opens on the CSS tab with the new lines highlighted. Click HTML to see the page being styled.

Fixed sizes with px

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.story {  background-color: white;  border: 3px solid #11141A;  padding: 16px;  width: 300px;}
What you see

The border, padding and width are all in pixels. The story box is exactly 300 pixels wide, however wide the mini browser is.

A width that follows the page: %

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.story {  background-color: white;  border: 3px solid #11141A;  padding: 16px;  width: 80%;}
What you see

width: 80%; makes the story 80% as wide as its parent, the body. Try this lesson on a phone and on a computer: the box changes width to fit.

Text size in rem

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.story {  background-color: white;  border: 3px solid #11141A;  padding: 16px;  width: 80%;}p {  font-size: 1.125rem;}
What you see

1.125rem is 1.125 times the page's text size: 1.125 × 16 = 18 pixels. If the page's text size ever changes, this paragraph changes with it.

Padding that follows the text: em

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.story {  background-color: white;  border: 3px solid #11141A;  padding: 16px;  width: 80%;}p {  font-size: 1.125rem;}.button {  display: inline-block;  background-color: #FFD043;  font-size: 1.125rem;  padding: 0.5em 1em;}
What you see

The button's padding is 0.5em 1em: half the button's text size on the top and bottom, and one full text size on the sides. Make the button text bigger, and the padding grows with it, so the button keeps its shape.

A banner as tall as part of the screen: vh

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.story {  background-color: white;  border: 3px solid #11141A;  padding: 16px;  width: 80%;}p {  font-size: 1.125rem;}.button {  display: inline-block;  background-color: #FFD043;  font-size: 1.125rem;  padding: 0.5em 1em;}h1 {  background-color: #4CC9FF;  min-height: 30vh;}
What you see

min-height: 30vh; makes the site name's banner at least 30% as tall as the window. In these lessons, the "window" is the mini browser.

A title that follows the screen width: vw

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.story {  background-color: white;  border: 3px solid #11141A;  padding: 16px;  width: 80%;}p {  font-size: 1.125rem;}.button {  display: inline-block;  background-color: #FFD043;  font-size: 1.125rem;  padding: 0.5em 1em;}h1 {  background-color: #4CC9FF;  min-height: 30vh;  font-size: 9vw;}
What you see

font-size: 9vw; makes the title 9% of the window's width. On a wide screen it's big, and on a phone it shrinks, so it fits on one line.

Quick notes

px Fixed pixels 
.card { border: 3px solid black; }

How to use

  • 16px Exactly 16 pixels, on every screen.
  • Good for borders and small, exact spaces.
  • 0 Zero needs no unit.

Examples

  1. A thin border.

    .card {  border: 2px solid #11141A;}

  2. A small exact gap under a heading.

    h2 {  margin-bottom: 8px;}
% Part of the parent 
.story { width: 80%; }

How to use

  • 50% Half the size of the box it sits in (its parent).
  • 100% As wide as the parent.
  • The size changes when the parent changes, like on a phone.

Examples

  1. A box that fills most of its parent.

    .story {  width: 80%;}

  2. Two side-by-side boxes that share the space.

    .half {  width: 50%;}

  3. A picture that fits any screen.

    img {  max-width: 100%;}
em Compared to this text size 
.button { padding: 0.5em 1em; }

How to use

  • 1em The same as the text size of this element.
  • 2em Twice that size.
  • For font-size, 1em is the parent's text size, so em values inside each other multiply.

Examples

  1. Button padding that grows with the button text.

    .button {  font-size: 1.125rem;  padding: 0.5em 1em;}

  2. Space under a heading that matches its size.

    h2 {  margin-bottom: 0.5em;}
rem Compared to the page text size 
p { font-size: 1.125rem; }

How to use

  • 1rem The text size of the whole page, usually 16px.
  • 1.5rem One and a half times that: 24px.
  • It looks at the same place every time (the <html> element), so it stays predictable.

Examples

  1. Story text a bit bigger than usual.

    p {  font-size: 1.125rem;}

  2. A big site name.

    h1 {  font-size: 2.5rem;}

  3. Spacing that matches the page text size.

    .card {  padding: 1rem;}
vh Part of the window height 
h1 { min-height: 30vh; }

How to use

  • 50vh Half the height of the browser window.
  • 100vh The full height of the window.
  • Changes when the window gets taller or shorter.

Examples

  1. A banner that fills half the screen.

    .banner {  min-height: 50vh;}

  2. A welcome screen as tall as the window.

    .welcome {  min-height: 100vh;}
vw Part of the window width 
h1 { font-size: 9vw; }

How to use

  • 50vw Half the width of the browser window.
  • 100vw The full width of the window.
  • Text in vw grows and shrinks with the screen.

Examples

  1. A title that grows on big screens.

    h1 {  font-size: 9vw;}

  2. A strip as wide as the window.

    .strip {  width: 100vw;}

Common mistakes

These are mistakes many beginners make. Each mini browser shows what really happens.

A space between the number and the unit

The mistake 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.story {  background-color: white;  border: 3px solid #11141A;  padding: 16 px;  width: 80%;}
What you see

16 px with a space is not a size the browser understands, so it skips the line. The story loses its padding, and the text touches the border.

Tip: Write the number and unit together: padding: 16px;

em sizes that keep growing

The mistake 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.story {  background-color: white;  border: 3px solid #11141A;  padding: 16px;  font-size: 1.5em;}p {  font-size: 1.5em;}
What you see

The story's text is 1.5 times the page size: 24px. The paragraph inside it is 1.5 times that: 36px. Each em is measured from its parent, so the sizes multiply.

Tip: Use rem for font sizes, so each size is measured from the same place.

100vw for a full-width box

The mistake 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.story {  background-color: white;  border: 3px solid #11141A;  padding: 16px;  width: 100vw;}
What you see

100vw is the whole window, but the box starts after the page's margin, and padding and border are added on top. So it's wider than the window and sticks out on the right.

Tip: Use width: 100%; to fill the parent. It counts the space the box really has.

Test your knowledge

Edit the CSS on the left. Open the HTML tab to see the class names you can use. The mini browser updates as you type, and each goal gets a check mark when it's done.

No clicking needed. Each goal gets a check mark by itself once your code does it.

  1. Make .card 90% wide with width and a % value.
  2. Give .card padding in em, like 1em.
  3. Set the .title font-size in rem, like 2rem.
  4. Give .card a min-height in vh, like 40vh.
Your code
What you see
Try an exercise

Recap

  • px is fixed. % is a part of the parent, so it changes with the space the element has.
  • rem follows the page's text size, and em follows the element's own text size. rem is the easiest choice for font sizes.
  • vh and vw are parts of the browser window's height and width.

References

Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.

  • W3C. CSS Values and Units Module Level 4 (official specification). Open reference
  • LibreTexts. Web Site Design (2022, open textbook). Open reference