Absolute units like pixels (px), inches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc) are best used when the physical characteristics of the output medium are well understood, such as in printing.
Absolute length units in CSS represent a fixed size, and the most common one is the pixel (px). A pixel is often described as a dot on the screen. While seemingly absolute, it’s important to note that a CSS pixel does not always equate to a physical pixel on a device, especially on high-resolution displays. Browsers might scale CSS measurements depending on the device’s pixel density.
You can use units to define various CSS properties such as width, height, font-size, margin, padding, and border-width.
Here is example code of the use of pixels (px), inches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc) in CSS. Absolute length units, meaning they represent a fixed size. However, it’s important to remember that a CSS pixel (px) does not always correspond directly to a physical pixel on a device screen.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Absolute Units Example</title>
<style>
.px-example { width: 192px; background-color: lightcoral; margin-bottom: 10px; height: 50px; } /* Equivalent to 2 inches */
.in-example { width: 2in; background-color: lightgreen; margin-bottom: 10px; height: 50px; }
.cm-example { width: 5.08cm; background-color: lightblue; margin-bottom: 10px; height: 50px; } /* Equivalent to 2 inches */
.mm-example { width: 50.8mm; background-color: gold; margin-bottom: 10px; height: 50px; } /* Equivalent to 2 inches */
.pt-example { width: 144pt; background-color: lightsalmon; margin-bottom: 10px; height: 50px; } /* Equivalent to 2 inches */
.pc-example { width: 12pc; background-color: lightseagreen; margin-bottom: 10px; height: 50px; } /* Equivalent to 2 inches */
</style>
</head>
<body>
<div class="px-example">Width in Pixels (px)</div>
<div class="in-example">Width in Inches (in)</div>
<div class="cm-example">Width in Centimeters (cm)</div>
<div class="mm-example">Width in Millimeters (mm)</div>
<div class="pt-example">Width in Points (pt)</div>
<div class="pc-example">Width in Picas (pc)</div>
</body>
</html>Example 2
.parent {
position: relative; /* Establish a containing block for absolute positioning */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
position: absolute; /* Positioned relative to the closest positioned ancestor */
top: 20px; /* 20 pixels from the top of the parent */
left: 50px; /* 50 pixels from the left of the parent */
background-color: yellow;
padding: 10px;
}the .child element is positioned 20 pixels from the top and 50 pixels from the left edge of its .parent element, which has position: relative set.
Explanation of absolute units in the CSS
- .px-example { width: 192px; … }: This sets the width of the div to 192 pixels (px). There are approximately 96 pixels in one inch.
- .in-example { width: 2in; … }: This sets the width to 2 inches (in).
- .cm-example { width: 5.08cm; … }: This sets the width to 5.08 centimeters (cm). One inch is equal to 2.54 centimeters. Therefore, 2 inches is 5.08 cm.
- .mm-example { width: 50.8mm; … }: This sets the width to 50.8 millimeters (mm). One centimeter contains 10 millimeters, so 5.08 cm is 50.8 mm, which is equivalent to 2 inches.
- .pt-example { width: 144pt; … }: This sets the width to 144 points (pt). One inch is equal to 72 points. Therefore, 2 inches are equal to 144 points.
- .pc-example { width: 12pc; … }: This sets the width to 12 picas (pc). One pica is equal to 12 points, so 12 picas is 144 points, which is equivalent to 2 inches.
When to Use Absolute Units:
Absolute units, like inches, centimetres, points, and picas, are most useful when the physical characteristics of the output medium are well known, such as in printing. For screen-based layouts, pixels (px) are commonly used, although relative units like em, rem, vw, and vh are often preferred for creating responsive designs that adapt to different screen sizes.
CSS3 Topics