当我注意到 <li> 之间的差距时，我正在构建菜单和 <ul> .即使将 margin 和 padding 设置为 0 也不能解决它，我不知道它来自哪里。
我在下面的示例中隔离了这个问题。
呈现的代码:http://gyazo.com/a8051a862c08c4dce4ce0b44ab4b271b
代码:
<!DOCTYPE html>
<html>
<head>
<style>
div#container{
display: inline-block;
border: 5px solid #00ff00;
}
ul{
list-style: none;
margin: 0px;
padding: 0px;
border: 5px solid #0000ff;
}
li{
display: inline-block;
border: 5px solid #ff0000;
width: 30px;
height: 30px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container">
<ul >
<li></li><li></li>
</ul>
</div>
</body>
</html>
有趣的是，如果我在 <li> 中写任何东西元素，差距消失。有人可以向我解释发生了什么以及我如何消除这个差距吗？
最佳答案
nathan 建议的是一个解决方案，这里是另一个，不使用 inline-block显示格式，因为它有时会产生问题 <ul>没有内容(如您的情况).....此演示使用 floats并且没有内容
CSS
li{
display: block;
border: 5px solid #CCC;
width: 30px;
height: 30px;
margin: 0px;
padding: 0px;
float:left; //added this
}
.clearfix {clear:both;}
HTML
<div id="container">
<ul ><li></li><li></li>
<div class="clearfix" ></div>
</ul>
</div>
关于html - <li> 和 <ul> 元素之间神秘的填充/边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20487951/