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 ?
give a positive ratinggive a negative rating
30 Mar 2022 at 06:52 PM

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:


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

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


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

give a positive ratinggive a negative rating
06 Apr 2022 at 11:49 AM
Share on FacebookShare on TwitterShare on LinkedInSend email
2023 AnswerTabsTermsContact us
How would you rate your experience with AnswerTabs ?
Very badVery good
Thank you for your feedback.