-1

I am experimenting with html/css and trying to learn them. But i have a small question about calculating the box sizes.

I have tried to understand them using px as an unit and everytings adds up but when I switched to vh,vw,% something unordinary happerens and I have no idea why.

So I would be really appriciated if you can explain me what is going on.

Thank you.

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="bir">
        <h1> Alper </h1>
    </div>
</body>

</html>

body {
    background-color: red;
}

.bir {
    background-color: pink;
    height: 20vh;
    font-size: 10vh;
}

.bir h1 {
    background-color: grey;
    padding: 5vh 0;
    width: 100vw;
}

As you can see there is some overflow of the

Alper Em
  • 1
  • 4

1 Answers1

1

VH/VW are percentages of the window dimensions, this is best used when creating responsive designs as it saves you having to adjust pixel values for smaller screens

vh = the percetage of your window height. Therefore 80vh = 80% of your screens total height.

vw = the percetage of your window width. Therefore 80vw = 80% of your screens total width.

% = the percentage of the parent container. Therefore height:50%; will be 50% of the parent's height

Marcus
  • 182
  • 1
  • 14
  • Thank you. But if you can just look at the image you will understand what i am trying to say more clear. – Alper Em May 10 '19 at 14:21
  • Is the image refereing to the space between the divs? Set margins to 0, should get rid of it – Marcus May 10 '19 at 14:43