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

Table of Content:

• em
• rem
• px and %
• vh and vw

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>

CSS

html{
    font-size: 16px;
}
.ems li{
    font-size: 1.3em;
}

It will give us the output:

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>

CSS

html{
    font-size: 16px;
}
.rems li{
    font-size: 1.5rem;
}

It gives us the output:

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>

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%;
}

It will give us the output:

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>

CSS

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

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!

Comments

[Anjali Chauhan]

Thanks For sharing <3

[Priya Kothalkar]

It's my pleasure!