CSS Absolute Units
Absolute units describe a fixed size that does not change based on the parent, the viewport, or the user's font settings.
Absolute units always represent the same length. On screens the pixel is the one you will reach for almost every time, while the print-oriented units matter mainly when you write styles for paper.
The Absolute Units
Pixels on Screen
The <px> unit is the workhorse for screen design. It is ideal for things that should stay crisp and constant, such as thin borders and small fixed offsets.
Fixed pixel sizes
<!DOCTYPE html>
<html>
<head>
<style>
.divider {
height: 1px;
background: #ddd;
}
.badge {
width: 24px;
height: 24px;
background: #00643c;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="divider"></div>
<div class="badge"></div>
</body>
</html>Units for Print
Sizing for print
<!DOCTYPE html>
<html>
<head>
<style>
@media print {
body {
margin: 2cm;
font-size: 12pt;
}
}
</style>
</head>
<body>
<h1>Article Title</h1>
<p>This page includes print-specific styling that applies when printed.</p>
</body>
</html>Note: Avoid setting font sizes in fixed px if you want them to respect a user's chosen default text size. Relative units like rem are a better choice for type.
Note: In CSS one inch is defined as exactly 96px, regardless of the actual pixel density of the display.
