Everything about css units

Most used units in css:

Unit name	Description
px	pixels. It means fixed
%	Percentage.
em	It's means take the unit value of parent element. If the unit value of parent element is 15px then it will take 15px as current element unit value. Now if we write 1em it means parent element unit_value1. In this case 151=15. Now if we write 2em it means parent element unit_value2. In this case 152=30. Now for 100em means 15*100.
rem	This unit value works according to browser default unit value. For example the default font-size of a browser is 16px. So it will take 16 pixel. Now if we write 1rem it means 161=16 or we write 2rem, it means 162=32px. For 100 rem 16100. Now if the browser default font-size 30px. Then 5rem =305=150px
vw	Viewport width
vh	Viewport height
vmin	Viewport minimum
vmax	Viewport maximum

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .divCSS1{
        background-color:green;
        height:130px;
        width:130px;
        border:solid 7px red;
    }
    .divCSS2{
        background-color:red;
        height:150px;
        width:50%;
        border:solid 7px red;
    }
    .divCSS3{
        background-color:pink;
        height:130px;
        width:50%;
        border:solid 7px red;
        font-size:2em;
    }
    .divCSS4{
        background-color:yellow;
        height:130px;
        width:130px;
        border:solid 7px red;
        font-size:2rem;
    }
    .divCSS5{
        background-color:blue;
        height:50vh;
        width:30vw;
        border:solid 7px red;
    }
    .divCSS6{
        background-color:black;
        height:2vh;
        width:10vw;
        border:solid 7px red;
    }
    .divCSS7{
        background-color:gray;
        height:130px;
        width:130px;
        border:solid 7px red;
    }
    .divCSS8{
        background-color:gray;
        height:30vmax;
        width:50vmin;
        border:solid 7px red;
    }
</style>
</head>
<body>

<div class="divCSS1 ">Pixel </div>

<div class="divCSS2 "> Percentage</div>

<div class="divCSS3 "> em </div>

<div class="divCSS4 ">rem </div>

<div class="divCSS5 "> vh and vw</div>

<div class="divCSS6 ">vh and vw </div>

<div class="divCSS7 "> vmin and vmax</div>

<div class="divCSS8 ">vmin and vmax </div>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us