I am facing an issue with a div container that contains four spans.
<body>
<main>
<div>
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</div>
</main>
</body>
The div is positioned absolutely to touch the bottom of the screen and the text-align property is set to justify for evenly spaced spans inside. However, when I try to make the spans have a height of 100%, a strange white space appears at the bottom which seems unrelated to the layout flow. I suspect it might be related to the div:after pseudo-element but I am unable to figure out the cause.
* {
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;
}
Is there something I am missing about how :after works or is this a glitch? What could be causing the unexplained white space at the bottom?
For reference, you can view the problem here: http://codepen.io/anon/pen/qdpERR?editors=110