Absolute and Relative Units in HTML

In this post, we will be learning absolute and relative units in HTML with examples.

Cascading Sheet Styles(CSS) in HTML has number of different units in which length can be measured. CSS properties like height, margin, font-size, border, etc. require length values.


CSS has two types of units for measuring lengths/dimensions:

  • Absolute Units
    Absolute units tie to the physical units of length, that is they approximate the actual measurement on a screen, keeping in mind the changes observed due to the difference in screen resolutions. They are fixed values and will appear exactly as the dimensions mentioned. Absolute units should not be used for a responsive website layout where the screen size varies.
Absolute and Relative Units in HTML

absolute units in HTML

 

Absolute units in HTML

Code Example:

<!DOCTYPE html>
<head>
<style>
/*inches*/
h1 { font-size: 0.5in; }
/*centimeters*/
h2 { line-height: 3cm; }
/*millimeters*/
h3 { word-spacing: 4mm; }
/*points*/
h4 { font-size: 12pt; }
/*picas*/
h5 { font-size: 1pc; }
/*pixel*/
h6 { font-size: 12px; }
</style>
</head>
<body>
<h1>This is h1 example</h1>
<h2>This is h2 example</h2>
<h3>This is h3 example</h3>
<h4>This is h4 example</h4>
<h5>This is h5 example</h5>
<h6>This is h6 example</h6>
</body>
</html>

  • Relative Units
    Relative units are tied to the other length values, that is, they depend on other specified lengths. It scales better in mediums of different resolutions.
    relative units in HTML        relative units
    Code Example:

    <!DOCTYPE html>
    <head>
    <style>
    /*Using % Notation*/
    body {
    font-size: 62.5%;
    }
    /*Using <em>em</em> notation*/
    p {
    font-size: 1.6em;
    }
    </style>
    </head>
    <body>
    <element>This is an element</element>
    <p>This is a paragraph</p>
    </body>
    </html>

We hope you got a clear idea of absolute and relative units in HTML.



Also read,

Leave a Reply

Your email address will not be published. Required fields are marked *