Question

我有这样的布局：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>

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添加到父元素。不要忘记为子元素定义font-size：

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

Answer 2

使用float

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

Answer 3

浏览器会显示您的内联块元素之间的sapces / linebreakes。你可以remove them，但可以更好地在你的td类上使用某种浮动。

我不确定您尝试使用标记显示哪种数据，但对于表格数据，表格的使用是完美的！ ;）

Answer 4

内联块被视为内联元素，因此空格将它们分隔为父元素中的常用单词。

我提出了两个解决方案：

您可以通过删除inline-block div之间的空格来解决此问题，例如：http://jsfiddle.net/f3AKu/
您可以将容器的font-size设置为0，这样空格就不会很明显。这样您就不会修改HTML标记，只修改CSS规则。示例：http://jsfiddle.net/wC68h/

Answer 5

要解决这个问题，你必须在一行中保存你的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>

希望这有帮助

Answer 6

我在内联块之间实现零空间的首选方法是使用CSS，父级为font-size:0，子级为font-size:16px。也就是说，还有其他几种方法可以用HTML和CSS来实现。这是一支现场笔：

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

“内联块”div之间的神秘空白

6 个答案: