CSS Units | Absolute Lengths | Relative Lengths

If you are interested to learn about the Opacity CSS

CSS Units

CSS has several different units for expressing a length. Many CSS properties take “length” values, such as widthmarginpaddingfont-size, etc. Length is a number followed by a length unit, such as 10px2em, etc.

Example

Set different length values, using px (pixels):

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

Note: A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed. There are two types of length units: absolute and relative.

Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

UnitDescription
cmcentimeters
mmmillimeters
ininches (1in = 96px = 2.54cm)
px *pixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (1pc = 12 pt)

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

Example

In this example, we are using the font-size property for the paragraphs for defining the values using the above absolute length units.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body{  
text-align: center;  
}  
</style>  
</head>  
<body>  
<h1> Absolute units </h1>  
<p style = "font-size: 20px;" > It has a font-size: 20px; </p>  
<p style = "font-size: 1.2cm;" > It has a font-size: 1.2cm; </p>  
<p style = "font-size: .7in;" > It has a font-size: .7in; </p>  
<p style = "font-size: 18pt;" > It has a font-size: 18pt; </p>  
<p style = "font-size: 2pc;" > It has a font-size: 2pc; </p>  
<p style = "font-size: 10mm;" > It has a font-size: 10mm; </p>  
</body>  
</html>  

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering mediums.

UnitDescription
emRelative to the font-size of the element (2em means 2 times the size of the current font)
exRelative to the x-height of the current font (rarely used)
chRelative to width of the “0” (zero)
remRelative to font-size of the root element
vwRelative to 1% of the width of the viewport*
vhRelative to 1% of the height of the viewport*
vminRelative to 1% of viewport’s* smaller dimension
vmaxRelative to 1% of viewport’s* larger dimension
%Relative to the parent element

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body{  
text-align: center;  
}  
p{  
line-height: 0.1cm;  
color: blue;  
}  
</style>  
</head>  
<body>  
<h1> Relative units </h1>  
<p style = "font-size: 2em;" > It has a font-size: 2em; </p>  
<p style = "font-size: 8ex;" > It has a font-size: 8ex; </p>  
<p style = "font-size: 6ch;" > It has a font-size: 6ch; </p>  
<p style = "font-size: 4rem;" > It has a font-size: 4rem; </p>  
<p style = "font-size: 4vw;" > It has a font-size: 4vw; </p>  
<p style = "font-size: 10vh;" > It has a font-size: 10vh; </p>  
<p style = "font-size: 10vmin;" > It has a font-size: 10vmin; </p>  
<p style = "font-size: 8vmax;" > It has a font-size: 8vmax; </p>  
<p style = "font-size: 400%;" > It has a font-size: 400%; </p>  
</body>  
</html>  
CSS Units | Absolute Lengths | Relative Lengths
Show Buttons
Hide Buttons