<分区>
<分区>
<div id="hello">
<ul>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
上面html的css
#hello{
margin:0px;
padding:0px;
border:1px solid black;
float:left;
}
#hello ul{
position:relative;
display: inline-block;
list-style:none;
margin:0px;
padding:0px;
}
#hello li{
float:left;
}
对于上面的 html 和 css，我总是为 ul 元素获得额外的 5px 边距。
从我的代码中逐行仔细检查每个 css 语句并编写上面的示例后，我发现问题是由于
display:inline-block;
or
display:inline-table;
克服这个问题的正确方法是什么？
一些其他论坛建议使用
“设置字体大小:0；对于父容器和字体大小:your_size；对于子容器。”
是否有任何其他解决方案可以防止这种情况发生，这样我的 0 字号就不会级联到 child 身上。
谢谢 斯里坎特
最佳答案
将 vertical-align: middle; 添加到 #hello ul 将消除底部不需要的“填充”。
默认的垂直对齐通常是baseline，它指的是没有下部的字母的底边(“a”或“B”没有下部，但是“y”或“g”做)。下面的 fiddle 使不受欢迎的“填充”的来源更加明显。它根本不是填充，而是为文本的下部保留的空间。
p {
border: 1px solid;
}
p.aligned img {
vertical-align: text-bottom;
}
<p>Something texty <img src="http://placehold.it/50x50" /></p>
<p class="aligned">Something texty <img src="http://placehold.it/50x50" /></p>
如果问题是 内联 block /内联表元素之间发生了不希望出现的间距，并且您不希望源代码看起来像一个巨大的连续句子，那么您可以使用注释.
<ul>
<li>a</li><!--
--><li>b</li>
</ul>
关于html - 使用 inline-table 或 inline block 时 5px 的额外边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15230262/