"inline-block" div 之间的神秘空白问题

Question

我有这样的布局：Fiddle link。即使设置了margin和padding为0，在.td之间仍然存在一些空白间隔。为什么会出现这种情况？如何解决？可以考虑使用负margin-left来解决，或者其他更好的解决方案。

<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>

- Kristian

Answer 1

解决方案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。不要忘记为子元素定义字体大小：

.tr {
  font-size: 0;
}
.td {
  font-size: 15px;
}

- Nikola K.

---

不错，解决方案2相当容易实现，点赞！ - Nag Hammadi

当使用HAML时，我可以通过%div<>避免标签内外呈现空格。 - Peter Ehrlich

Answer 2

使用浮动

.td {
    float: left;
    height: 20px;
    margin: 0;
    padding: 0;
 }

- GajendraSinghParihar

---

我之前使用的是float，但当应用width: 60px时，它将第三个框推到了新行。 - Kristian

是的，因为父元素的宽度小于子元素的总宽度，所以你可以增加父元素的宽度，或在内联div中注释掉多余的空间。示例：http://jsfiddle.net/bysMR/7/ - GajendraSinghParihar

Answer 3

我的首选方法是使用CSS来实现内联块之间的零间隔，方法是将父元素设置为font-size:0，子元素设置为font-size:16px。不过，还有其他几种使用HTML和CSS实现的方法。以下是一个实时演示：

http://codepen.io/chriscoyier/pen/hmlqF

- MogSelf

Answer 4

浏览器会显示内联块元素之间的空格/换行符。您可以删除它们，但更好的方法可能是在td类上使用某种浮动。

我不确定您尝试使用标记显示什么类型的数据，但对于表格数据，使用表格是完全可以的！;)

- Jona

Answer 5

内联块被视为内联元素，因此空格将它们分隔开，就像父元素中的普通单词一样。

我提出了2个解决方案：

1. 您可以通过删除 inline-block div 之间的空格来修复它，如下所示：http://jsfiddle.net/f3AKu/

2. 您可以将容器的字体大小设置为0，这样空格就不会被注意到。这样，您不会修改HTML标记，只需修改CSS规则。例如：http://jsfiddle.net/wC68h/

- keaukraine

Answer 6

为了解决这个问题，你需要将你的div放在同一行上：

<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>

希望这能有所帮助

- Razmig