Cryptic space outside the HTML stream?
I have a simple div wrapper with four spans inside.
<body>
<main>
<div>
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</div>
</main>
</body>
The div is positioned absolutely so that I can make it touch the bottom of the screen, and the alignment of the text is justified so that the gaps inside are evenly distributed. This works great until I try to make my span: 100%, then a mysterious white space appears outside of the actual flow at the very bottom. I think it has something to do with my div: after psudo-element, but I have absolutely no idea what's going on.
* {
padding: 0;
margin: 0;
}
main {
position: relative;
height: 100vh;
width: 100%;
background-color: rgb(45, 45, 65);
text-align: center;
}
div {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
bottom: 0;
text-align: justify;
display: block;
}
div:after {
display: inline-block;
width: 100%;
content: '';
}
span {
background-color: rgb(25, 25, 45);
box-sizing: border-box;
display: inline-block;
font-size: 1em;
padding: 10px;
height: 100%;
}
span:hover {
background-color: white;
}
Don't I understand how: after work, or is it some kind of glitch? Where in the world is this white interval coming from below?
The problem is reproduced here: http://codepen.io/anon/pen/qdpERR?editors=110
source to share
just add overflow: hidden;
in main
or even parent main
should work.
Check link http://codepen.io/TibicenasDesign/pen/yNpyLr?editors=110
Uncomment overflow: hidden;
or box-sizing: border-box
, then the white space at the end of the web page will be removed.
Window size also works! i always get it with a border box so forgot it haha and maybe its best solution
source to share