DEV Community

Cover image for Understanding em, rem, px, vh, vw, and % conventions
Priya Kothalkar
Priya Kothalkar

Posted on • Updated on

Understanding em, rem, px, vh, vw, and % conventions

Table of Content:

We are using frequently some of the conventions in CSS to style our elements. Sometimes we use px, rem, em, and so on. But did you think what are they doing? How our elements are getting different sizes using them? Yeah, we have questions Don't we? So I wanted to summarize the answer to it efficiently! So what are you waiting for let's dive into the concept!

  • em: Relative to the parent's size
  • rem: based on the root size (1rem = 16px)
  • px: it defines size in pixel (1px = 0.0625 rem)
  • vh: 1% of viewport height
  • vw: 1% of viewport width
  • %: Relative to parent's size

Let's understand using examples:

Example1: Using em

em is a relative length unit, which is relative to parent size.

HTML

<ul class="ems li">
   <li>First</li>
   <li>Second</li>
   <li>Third
       <ul>
           <li>Third A</li>
           <li>Third B
               <ul>
                   <li>Third B 2</li>
               </ul>
           </li>
       </ul>
    </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

CSS

html{
    font-size: 16px;
}
.ems li{
    font-size: 1.3em;
}
Enter fullscreen mode Exit fullscreen mode

It will give us the output:
Exampleoneoutput

Here, we have applied em to every list inside class ems. So, As "First" has a font-size: 1.3em, the next "First A" is having font-size 1.3 times to parent size. And so on.

Example2: Using rem

rem is a relative length unit, which is relative to the root's size

HTML

<ul class="rems li">
   <li>First</li>
   <li>Second</li>
   <li>Third
       <ul>
           <li>Third A</li>
           <li>Third B
               <ul>
                   <li>Third B 2</li>
               </ul>
            </li>
        </ul>
    </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

CSS

html{
    font-size: 16px;
}
.rems li{
    font-size: 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode

It gives us the output:
Exampletwooutput

As rem is relative to root font-size and we have given html as font-size 16px so each list element having 16px font-size.

Example3: Using px and % (percentage)

Pixel-px is an absolute length unit that is not relative to anything else and is always the same size.

HTML

<div class="box">
    <p>I am a using pixel</p>
</div>
<div class="box">
    <p class="para">I am using percentage</p>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.box{
    color:white;
    border:2px solid black;
    margin:1rem;
}
.box p{
    margin: 0;
    width: 200px;
    background-color: purple;
    padding: 1rem;
}
.box .para{
    width:20%;
}
Enter fullscreen mode Exit fullscreen mode

It will give us the output:
ExampleThreeOutput

Pixel is independently accessing its 200px and % is dependent on div block, so it's accessing the 20% of div block size.

Example4: Using Vh(Viewport's Height) and Vw (Viewport's width)

vh and vw are relative length units that are relative to the viewport.

HTML

<div class="block Vh">I am 10 vh long</div>
<div class="block Vw">I am 10vw wide</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.block{
    background-color: aqua;
    margin:1rem;
    border: 2px solid black;
}
.Vh{
    width:10vh;
}
.Vw{
    width: 10vw;
}
Enter fullscreen mode Exit fullscreen mode

ExampleFourOutput

As shown in the output you will see, 10vh is equals to 100px and 10vw is equals to 120px for viewport of 1200px width and 1000px height.

So, It's completed! I hope you will find this helpful and if there are any suggestions please write in the comments.

Thank You!

Top comments (2)

Collapse
 
anjali1102 profile image
Anjali Chauhan

Thanks For sharing <3

Collapse
 
kothalkarpriya profile image
Priya Kothalkar

It's my pleasure!