HTML流程之外的神秘空白？

我有一个简单的div包装，里面有四个跨度。HTML流程之外的神秘空白？

<body> 
    <main> 
    <div> 
     <span>One</span> 
     <span>Two</span> 
     <span>Three</span> 
     <span>Four</span> 
    </div> 
    </main> 
</body>

的DIV绝对定位，这样我可以得到它的触摸屏幕的底部，文本对齐是证明这样里面的跨度间隔均匀。这工作正常，直到我试图让我的跨度身高：100％，然后一个神秘的白色空间出现在最底层的实际流程之外。我认为这与我的div有关：在psudo-element之后，但我完全不知道发生了什么。

* { 
    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; 
}

难道我不明白如何：在作品之后，还是这是某种毛病？世界上哪个地方的白色间距来自底部？

这里的问题的再现：http://codepen.io/anon/pen/qdpERR?editors=110

来源

2015-06-26 Wyatt Arent

原因是'高度：calc（100％ - 20px）;'，其中20px不是enaugh。 – cybersoft

为什么需要在跨度上放100％的高度？如果我从'.link'中删除这个'height：calc（100％ - 20px）'。它对我来说看起来很好，或者这不是你想要的吗？ – DavidDomain

@cybersoft如果你喜欢，试着将它改为-40px。你会发现你是不正确的;有一些看不见的东西造成了差距。 –