参见英文答案 >
How do I remove the space between inline-block elements?35个
我有这样的布局： Fiddle link
我有这样的布局： Fiddle link
在.td之间是一些空白区域,即使margin和padding设置为0.
为什么会发生这种情况以及如何解决这个问题？负边距可能会留下吗？或者更好的解决方案？
<style>
.tr {
height: 20px;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
word-spacing: 0;
}
.td {
display: inline-block;
height: 20px;
margin: 0;
padding: 0;
}
</style>
<div class="tr" style="width: 150px;">
<div class="td" style="width: 50px; background-color: #CCC;"></div>
<div class="td" style="width: 50px; background-color: #AAA;"></div>
<div class="td" style="width: 50px; background-color: #666;"></div>
</div>
解决方法
解决方案1：添加评论：
<div class="tr" style="width: 150px;">
<div class="td" style="width: 50px; background-color: #CCC;"></div><!--
--><div class="td" style="width: 50px; background-color: #AAA;"></div><!--
--><div class="td" style="width: 50px; background-color: #666;"></div>
</div>
您也可以在同一行上编写所有内容,但通过注释看起来更干净.
解决方案2：将font-size：0添加到父元素.不要忘记为子元素定义font-size：
.tr {
font-size: 0;
}
.td {
font-size: 15px;
}
