CSS units – %, em, rem, px, vh, vw

Last Updated : 16 Mar, 2023

In this article, we will see how to set the CSS units in different ways.

% – The % unit is used to set the font-size relative to the current font-size.
em – It is used to set the relative size. It is relative to the font-size of the element.
Note: Here 2em meaning 2times the size of current font.
rem – Relative to the browser base font-size.
px – It defines the font-size in terms of pixels. (96px = 1in)
vh – Relative to 1% of the height of the viewport.
vw – Relative to 1% of the width of the viewport.

Example 1: The pixel unit is an absolute unit to set the width i.e. it is always the same. A percentage unit is based on a relative unit i.e. it is based on its parent size.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .box { 
            background: red; 
            border: 1px solid black; 
            margin: 10px; 
        } 
  
        .parent { 
            background: white; 
            border: 1px solid black; 
        } 
  
        .fifty-percent { 
            width: 50%; 
        } 
  
        .one-hundred { 
            width: 100px; 
        } 
  
        .parent { 
            width: 250px; 
            ; 
        } 
    </style> 
</head> 
  
<body> 
    <h3>Output-1 </h3> 
    <div class="box fifty-percent">50%</div> 
    <div class="box one-hundred">100px</div> 
    <hr> 
    <h3>Output-2 </h3> 
    <div class="parent"> 
        <div class="box fifty-percent">50%</div> 
        <div class="box one-hundred">100px</div> 
    </div> 
</body> 
  
</html>

Output :

Example 2: Another type of relative width is called view width (vw) and view height (vh). 1vw equals one percent of the entire screen size so 100 vw would take up the entire width and 50vw obviously would take up half the width but the important thing about vw versus percentages is that viewport units are based on the entire screen size while percentages are relative to their parent.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
    <style> 
        .box { 
            background: red; 
            border: 1px solid black; 
            margin: 10px; 
        } 
  
        .parent { 
            background: white; 
            border: 1px solid black; 
        } 
  
        .fifty-percent { 
            width: 50%; 
        } 
  
        .fifty-vw { 
            width: 50vw; 
        } 
  
        .twenty-five-vh { 
            height: 25vh; 
        } 
  
        .parent { 
            width: 100px; 
            ; 
        } 
    </style> 
</head> 
  
<body> 
    <h3>Output-1 </h3> 
    <div class="box fifty-percent">50%</div> 
    <div class="box fifty-vw">50vw</div> 
    <div class="box twenty-five-vh">25vh</div> 
    <hr> 
    <h3>Output-2 </h3> 
    <div class="parent"> 
        <div class="box fifty-percent">50%</div> 
        <div class="box fifty-vw">50vw</div> 
        <div class="box twenty-five-vh">25vh</div> 
    </div> 
</body> 
  
</html>

Output:

Example 3: Both REM units and EM units are relative but instead of being relative to things around them such as the width of their parents or the height of the parents they’re actually relative to the font size.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
    <style> 
        .parent { 
            background: white; 
            border: 1px solid black; 
        } 
  
        .one-rem { 
            font-size: 1rem; 
        } 
  
        .one-em { 
            font-size: 1em; 
        } 
  
        .two-rem { 
            font-size: 2rem; 
        } 
  
        .two-em { 
            font-size: 2em; 
        } 
  
        .parent { 
            font-size: 30px; 
        } 
    </style> 
</head> 
  
<body> 
    <h3>Output-1</h3> 
    <div class="one-rem">1rem</div> 
    <div class="one-em">1em</div> 
    <div class="two-rem">2rem</div> 
    <div class="two-em">2em</div> 
    <hr> 
    <h3>Output-2</h3> 
    <div class="parent"> 
        <div class="one-rem">1rem</div> 
        <div class="one-em">1em</div> 
        <div class="two-rem">2rem</div> 
        <div class="two-em">2em</div> 
    </div> 
</body> 
  
</html>