Bird
Raised Fist0
CSSmarkup~5 mins

Absolute units in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Absolute units let you set sizes that stay the same no matter the screen or device. They are useful when you want fixed sizes.

When you want a button to always be exactly 2 inches wide.
When printing a page and you need precise measurements in centimeters.
When designing a logo that must keep the same size on all screens.
When setting a fixed margin or padding that should not change.
When creating a ruler or scale that matches real-world units.
Syntax
CSS
property: value unit;

Common absolute units include cm (centimeters), mm (millimeters), in (inches), px (pixels), pt (points), and pc (picas).

Absolute units do not scale with screen size or user settings.

Examples
Sets the width to 5 centimeters exactly.
CSS
width: 5cm;
Sets the height to 2 inches exactly.
CSS
height: 2in;
Sets the margin to 10 pixels, a common absolute unit for screens.
CSS
margin: 10px;
Sets the font size to 12 points, often used in print.
CSS
font-size: 12pt;
Sample Program

This example creates a blue box with a fixed width of 5 centimeters and height of 3 centimeters. It has a 1 inch margin around it. The font size inside is set to 12 points for clear text. The box is centered with flexbox for neat alignment.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute Units Example</title>
  <style>
    .box {
      width: 5cm;
      height: 3cm;
      background-color: lightblue;
      border: 2px solid navy;
      margin: 1in;
      font-size: 12pt;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: navy;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="box" role="region" aria-label="Blue box with fixed size">
    This box is 5cm wide and 3cm tall with 1 inch margin.
  </div>
</body>
</html>
OutputSuccess
Important Notes

Absolute units are great for print or when exact size matters.

On screens, pixels (px) are the most common absolute unit.

Be careful: absolute units do not adjust for different screen sizes or zoom levels, so they can cause layout issues on small or large screens.

Summary

Absolute units set fixed sizes that do not change with screen or zoom.

Common units: cm, mm, in, px, pt, pc.

Use them when you need precise control over size, like for print or fixed layouts.

Practice

(1/5)
1. Which of the following is an example of an absolute CSS unit?
easy
A. em
B. %
C. rem
D. cm

Solution

  1. Step 1: Understand absolute vs relative units

    Absolute units are fixed sizes that do not change with screen or zoom, like centimeters (cm), inches (in), pixels (px).

  2. Step 2: Identify the absolute unit in options

    cm is an absolute unit, while em, rem, and % are relative units.

  3. Final Answer:

    cm -> Option D

  4. Quick Check:

    Absolute unit = cm [OK]
Hint: Absolute units are fixed sizes like cm, in, px [OK]
Common Mistakes:
  • Confusing relative units like em or rem as absolute
  • Thinking % is absolute unit
  • Mixing up px as relative
2. Which CSS syntax correctly sets a width of 5 centimeters?
easy
A. width: 5 cm;
B. width: 5 cm
C. width = 5cm;
D. width: 5cm;

Solution

  1. Step 1: Check correct CSS property syntax

    CSS properties use colon (:) after property name and end with semicolon (;). Spaces between number and unit are allowed but not recommended.

  2. Step 2: Identify correct spacing and punctuation

    width: 5 cm; is correct. Equal sign is invalid.

  3. Final Answer:

    width: 5 cm; -> Option A

  4. Quick Check:

    Correct CSS syntax = width: 5 cm; [OK]
Hint: Use colon and semicolon; space between number and unit is allowed [OK]
Common Mistakes:
  • Using equal sign instead of colon
  • Omitting semicolon at end
3. What will be the width of the box in the browser if the CSS is:
div { width: 2in; }
medium
A. 2 inches on screen
B. 2 pixels
C. 2 centimeters
D. 2 points

Solution

  1. Step 1: Understand the in unit meaning

    in stands for inches, an absolute unit representing physical inches on screen or print.

  2. Step 2: Interpret the CSS width value

    The width is set to 2 inches, so the box will be exactly 2 inches wide on the screen or print.

  3. Final Answer:

    2 inches on screen -> Option A

  4. Quick Check:

    2in means 2 inches width [OK]
Hint: in means inches, so width is in inches [OK]
Common Mistakes:
  • Confusing inches with pixels
  • Thinking in is relative unit
  • Assuming 2in equals 2cm
4. Identify the error in this CSS code:
p { font-size: 12 pt; }
medium
A. Missing semicolon after property
B. Space between number and unit is invalid
C. Incorrect property name
D. Unit pt is not an absolute unit

Solution

  1. Step 1: Check CSS unit syntax

    In CSS, there should be no space between the number and the unit. 12 pt is invalid.

  2. Step 2: Confirm the correct usage

    The correct syntax is font-size: 12pt; with no space.

  3. Final Answer:

    Space between number and unit is invalid -> Option B

  4. Quick Check:

    No space between number and unit [OK]
Hint: No space allowed between number and unit [OK]
Common Mistakes:
  • Adding space between number and unit
  • Thinking pt is invalid unit
  • Forgetting semicolon
5. You want to create a print stylesheet where a box is exactly 3 centimeters wide and 1 inch tall. Which CSS snippet correctly sets this using absolute units?
hard
A. box { width: 3in; height: 1in; }
B. box { width: 3cm; height: 1cm; }
C. box { width: 3cm; height: 1in; }
D. box { width: 3px; height: 1in; }

Solution

  1. Step 1: Match width and height units to requirements

    The width must be 3 centimeters and height 1 inch, so use 3cm for width and 1in for height.

  2. Step 2: Verify the CSS syntax correctness

    The syntax box { width: 3cm; height: 1in; } is correct and uses absolute units as required.

  3. Final Answer:

    box { width: 3cm; height: 1in; } -> Option C

  4. Quick Check:

    Use correct absolute units for each dimension [OK]
Hint: Use cm for centimeters and in for inches exactly [OK]
Common Mistakes:
  • Mixing units for width and height
  • Using pixels instead of absolute units
  • Using same unit for both dimensions incorrectly