There are 4 divs, each of them has width: 25vw; and height: 100vh;. I thought they could horizontally align in a line and so that tile the whole browser viewport. But they didn't. A line break was between the 3rd and the 4th div, and the scroll bar also appeared.
Then I inspected them, and DevTools told me the computed width of each was 480px, which exactly equaled to 25vw(My screen is 1920 * 1080).
Finally, I gave the body overflow: hidden. The scroll bar disappeared, and the viewport was filled with 4 divs. Everything was fine, except I got totally confused. Why? 100vw & 100vh shouldn't make any overflow.
Here is my code:
body {
padding: 0;
margin: 0;
font-size: 0;
}
div {
display: inline-block;
width: 25vw;
height: 100vh;
background-color: lightblue;
}<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>or
body {
padding: 0;
margin: 0;
}
div {
float: left;
width: 25vw;
height: 100vh;
background-color: lightblue;
}<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>P.S. I have tried both display: inline-block; and float: left; on Chrome & Firefox & Chromium Edge, the results are the same.
P.P.S. After saw the comments & answers, I tried to give the body width: 100vw;, and everything got nice. It seems that it is 25vw > the width of the body that causes the overflow. But still, I cannot understand this behavior. As far as I am concerned, the body is a block, and its width will be extended until equal to its content width if there is enough space. Since 100vw doesn't exceed the viewport, there is no overflow. The only reasonable explanation here is that the body has its own width by default, which value is less than 100vw, so the line break and scroll bar appears. The question is, is it true? Where is the default value from? I inspected it and found the value is 1519.2px. Why so strange?
New code:
body {
padding: 0;
margin: 0;
width: 100vw;
}
div {
float: left;
width: 25vw;
height: 100vh;
background-color: lightblue;
}
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
For horizontal aligning it's best you use flexbox.
And be sure all margin, padding and border space are removed from the body