Understanding CSS Absolute and Relative Units


The fonts, height, width, margins, padding, etc. are set on a web page with the length units. For example, height 100px, width 100px, font 2em, etc. These length units are categorised into Absolute and Relative Units.

CSS Absolute Units

The absolute length units are fixed in relation to each other. These units are used when the output format is already known. The following are some of the Absolute Length Units −

Sr.No

Unit & Description

1

cm

centimeters

2

mm

millimeters

3

in

inches (1in = 96px = 2.54cm)

4

px *

pixels (1px = 1/96th of 1in)

5

pt

points (1pt = 1/72 of 1in)

6

pc

picas (1pc = 12 pt)

Absolute Unit inches

Let us now see an example where we have used the Absolute Length Unit inches (in) −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         text-decoration: overline underline;
         text-decoration-color: blue;
         font-size: 0.3in;
      }
   </style>
</head>
<body>
   <h1>Details</h1>
   <p class="demo">Examination Center near ABC College.</p>
   <p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Absolute Unit pixels

Let us another example where the container height and width are set with the Absolute Length Unit pixels (px) −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin-top: 10px;
         height: 200px;
         width: 200px;
         overflow: auto;
         margin: 20px;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <div>
      <ul>
         <li>a</li>
         <li>b</li>
         <li>c</li>
      </ul>
   </div>
</body>
</html>

Absolute Unit points

Let us now see an example where we have used the Absolute Length Unit points (pt) −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      p.demo {
         border: 2px solid blue; 
         padding: 35px 70px 50px 40px;
         font-size: 20pt;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is a demo text.</p>
   <p class="demo">This is another demo text.</p>
   <p>Another demo text</p>
   <h2>Demo Heading2</h2>
   <p>Demo text</p>
</body>
</html>

CSS Relative Units

Relative length units in CSS are used to specify a length relative to another length property.

Relative to the x-height of the current font

S.No.

Unit & Description

1

em

Relative to the font-size of the element i.e., 4em means 4 times the size of the current font.

2

ex

Relative to the x-height of the current font

3

ch

Relative to width of the 0

4

rem

Relative to font-size of the root element

5

vw

Relative to 1% of the width of the viewport

6

vh

Relative to 1% of the height of the viewport

7

vmin

Relative to 1% of viewport's smaller dimension

8

vmax

Relative to 1% of viewport's larger dimension

9

%

Relative to the parent element

Relative Unit em

Let us see an example using Relative Length Unit em −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         text-decoration: overline underline;
         text-decoration-color: blue;
         font-size: 1.4em;
      }
   </style>
</head>
<body>
   <h1>Details</h1>
   <p class="demo">Examination Center near ABC College.</p>
   <p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Relative Unit vw

Let us see another where we have set the font using the vw absolute unit −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         font-size: 10vw;
      }
      p {
         font-size: 5vw;
      }
   </style>
</head>
<body>
   <h1>Responsive Text Example</h1>
   <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, rerum.
   </p>
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, necessitatibus officiis hic est in nobis!
   </p>
</body>
</html>

Relative Unit ch

Let us see another where we have set the font using the ch absolute unit −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      p.demo {
         border: 2px solid blue; 
         padding: 35px 70px 50px 40px;
         font-size: 2ch;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is a demo text.</p>
   <p class="demo">This is another demo text.</p>
   <p>Another demo text</p>
   <h2>Demo Heading2</h2>
   <p>Demo text</p>
</body>
</html>

Updated on: 02-Jan-2024

168 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements