html - 什么占用了网页空间？

Question

我有五个链接彼此相邻，虽然它们设置为 20% 宽度，但最后一个链接到下一行。但是，当我将它设置为 19.5% 时，就可以了。我确保将正文、链接和所有包含元素的填充和边距设置为 0。虽然这不是主要问题，但我们将不胜感激。

这是 html:

<div id="top">
    <img src="someimage" />
    <nav id="nav">
        <a href="link1.html">LINK1</a>
        <a href="link2.html">LINK2</a>
        <a href="link3.html">LINK3</a>
        <a href="link4.html">LINK4</a>
        <a href="link5.html">LINK5</a>
    </nav>
</div>

还有CSS:

body {
    background-color: white;
    margin: 0;
    padding: 0;
}
#top {
    background-color: #AAAAAA;
    height: 50px;
}
#nav > a {
    display:inline-block;
    height: 25px;
    width: 19.5%;
    background-color: #AAAAAA;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    color: #222222;
}  

感谢您的回答。我在标签之间添加注释，效果很好。

Answer 1

它是标签之间的空白。 Check out this article你可以做些什么来对抗它。

我的建议是将 HTML 全部放在一行中。它更难阅读，但呈现您想要的内容。

不过，最好的方法是构建一个步骤来缩小您的 HTML 并自动删除所有内容。