CSS units - %, em, rem, px, vh, vw - GeeksforGeeks

21 Apr, 2022
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 rectangles 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>
Output:
surindertarika1234
CSS-Properties
CSS-Questions
HTML-Questions
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript