0
0
CSSmarkup~5 mins

Absolute units in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.