Meaning of VH and VW in CSS - difference between VH, VW, %, PX

What is the difference between VH, VW, % and PX in CSS ? What does VH and VW do ?
30 Mar 2022 at 06:52 PM
0give a positive ratinggive a negative ratingshow more
StorStor
Hi,

All of them VH, VW, % and PX are units for expressing a length in CSS. Both VH (viewport height) and VW (viewport width) are relative length units.

1 viewport unit is relative to 1% of the width or height of the viewport.

For example, when the height is set to 100vh, it is equal to 100% of the viewport height:


<style>

body {
padding: 0px;
margin: 0px;
}

.content {
height: 100vh;
width: 100%;
background-color: aqua;
}

</style>

<body>
<div class='content'>Text</div>
</body>

06 Apr 2022 at 11:49 AM
0give a positive ratinggive a negative ratingshow more
TimTim
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook
2022 AnswerTabsTermsContact us