Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære CSS Units | Styling Fundamentals
CSS Foundations

bookCSS Units

When working with CSS, you can control the size of elements using a variety of units. Understanding the difference between absolute and relative units is essential for creating flexible and accessible layouts.

Absolute units, such as px (pixels), have a fixed size. Using px means the element will always appear the same size regardless of its parent or the user's browser settings. This is useful when you want precise control over spacing or when designing elements that must stay the same size across devices.

Relative units adapt based on other measurements:

  • em is relative to the font size of the element's parent. If the parent has a font-size of 20px, then 1em equals 20px in that context;
  • rem is relative to the root element's (<html>) font size. If the root font size is 16px, then 1rem is always 16px, no matter where it is used;
  • % is relative to the size of the parent element. For width and height, this means the element will scale as its container changes size.

Choosing between these units depends on your layout needs:

  • Use px for elements that must remain a specific size;
  • Use em or % for components that should scale with their parent;
  • Use rem to ensure consistent sizing across the page, especially for typography.

Relative units are especially helpful for responsive design, where you want elements to adjust smoothly to different screen sizes or user settings. Understanding how each unit works allows you to build layouts that are both flexible and predictable.

index.html

index.html

style.css

style.css

copy
question mark

Which CSS unit scales relative to its parent element's font size?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 2

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 6.67

bookCSS Units

Sveip for å vise menyen

When working with CSS, you can control the size of elements using a variety of units. Understanding the difference between absolute and relative units is essential for creating flexible and accessible layouts.

Absolute units, such as px (pixels), have a fixed size. Using px means the element will always appear the same size regardless of its parent or the user's browser settings. This is useful when you want precise control over spacing or when designing elements that must stay the same size across devices.

Relative units adapt based on other measurements:

  • em is relative to the font size of the element's parent. If the parent has a font-size of 20px, then 1em equals 20px in that context;
  • rem is relative to the root element's (<html>) font size. If the root font size is 16px, then 1rem is always 16px, no matter where it is used;
  • % is relative to the size of the parent element. For width and height, this means the element will scale as its container changes size.

Choosing between these units depends on your layout needs:

  • Use px for elements that must remain a specific size;
  • Use em or % for components that should scale with their parent;
  • Use rem to ensure consistent sizing across the page, especially for typography.

Relative units are especially helpful for responsive design, where you want elements to adjust smoothly to different screen sizes or user settings. Understanding how each unit works allows you to build layouts that are both flexible and predictable.

index.html

index.html

style.css

style.css

copy
question mark

Which CSS unit scales relative to its parent element's font size?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 2
some-alt