这两个元素（<li>）之间的这个随机额外空间是什么？
我有这个问题。 我搜索了这个网站，其他人也遇到了类似的问题，但是没有一个答案似乎有效。 这些包括设置行高为0px; 并将所有边距/填充设置为0px。 我使用Google Chrome的检查元素材质来检查边距/填充。 我徘徊在我的“a”元素和“li”元素上，看看他们是否有任何不必要的填充或边距，但他们没有。
奇怪的是，他们在每个链接之间有一个空白区域，没有被整个文档中的任何元素占据。
现在，由于文本之间没有边界，所以无法识别，但Link4中“a”周围的空间小于Link1中文本周围的空间。 第一个“li”元素的宽度奇怪地比第四个“li”容器宽4px，并且有一点空白。 我想摆脱白色空间，任何想法？
代码如下：
CSS：
html {
overflow-y: scroll;
}
body {
background-color: #ffdeff;
overflow: hidden;
}
#wrapper {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
background-color: white;
border-left: 1px solid rgb(210, 210, 210);
}
#header {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
}
#header-toolbar {
width: 1000px;
list-style-type: none;
border-radius: 3px;
position: absolute;
}
#nav-position {
position: absolute;
float: left;
padding: 0px;
margin: 0px;
}
.nav-link-container {
background-color: #FF66CC;
display: inline;
padding: 0px;
text-align: center;
}
.nav-link {
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
line-height: 0px;
display: table;
display: inline;
margin: 0 auto;
}
HTML文件：
<body>
<script src="jquery-1.9.1.js"></script>
<script>
</script>
<div id="wrapper">
<div id="header">
<div id="header-toolbar">
<ul id="nav-position">
<li class="nav-link-container">
<a class="nav-link">Link1</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link2</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link3</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link4</a>
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
任何帮助！ 非常感谢你！
将<li>放入新行时有一些空格。 所以一个解决方案是像这样将它们全部添加在同一行中：http://jsfiddle.net/6tzxj/1/
上一篇: What is this random extra space between these two elements(<li>)?