Css 文本对齐：对齐添加空白

我有几个项目使用了文本对齐：justify；它是：：在伪选择器之后，均匀地隔开水平导航、页脚或任何类似的部分。然而，为了使一切看起来都正确，我还必须硬编码正确内容的父级的高度。在处理媒体查询和诸如此类的问题时，这可能会变得单调乏味。如果没有硬编码的高度，在样式表中使用：：after会在父级的底部添加一个空格。我使用过元素检查器，不管我是否手动编写，：：after的高度都是0，所以我不确定是什么原因导致它。有人能告诉我如何在不指定高度的情况下在样式中去掉它吗

* {
margin: 0;
padding: 0;
}

html, body {
    background: blue;
}

nav {
    background: lighten(blue, 20%);
    padding: 10px 30px;
    ul {
        list-style-type: none;
        display: inline-block;
        text-align: justify;
        width: 100%;
        &:after {
            content: '';
            display: inline-block;
            width: 100%;
            height: 0;
        }
        li {
            display: inline-block;
            a {
                font-family: Helvetica, sans-serif;
                font-size: 20px;
                color: darken(white, 10%);
                text-decoration: none;
            }
        }
    }
}

---

谢谢大家

内联块元素的一个缺点是浏览器在其周围添加了一些空格。您可以通过将父级的

字体大小设置为
0
来解决此问题。然后，您需要在任何子元素上设置适当的
font-size
，否则它们将从父元素继承
font-size:0

nav {
    font-size: 0;
}

更新的代码笔：
您需要为导航项目本身指定一些
字体大小
，否则它们将继承
0
。在他的例子中，他做到了，但一般来说，你需要这样做，只是一个提醒。这很有效！非常感谢。现在，这让我想知道为什么会这样？谢谢@vsync，我编辑了我的答案。OP在他的示例中已经在导航项上设置了字体大小，所以这里没有问题。@MarkLittle-空格是一个你看不见的字符，但会占用呈现页面的空间，因此通过将所有字体大小设置为
0
，空格字符将收缩为零，并且不会影响布局，并将被淘汰。