Question

这是一个常见的问题，但我无法弄清楚它为什么会发生。

我有一个父div，在div里面我有3个div，宽度设置为33％（确切地说，不是33.3％！）和display: inline-block。

在Chrome中它运行良好，但在Mozilla和Opera中却没有（我还没有在IE中测试它）。我认为问题可能出在算法浏览器用于从百分比计算像素大小的算法中。但是当我检查DOM指标时，我发现父亲的宽度是864px而孩子的宽度是285px（这是正确的：864 * .33 = 285.12）。但为什么它不适合父母呢？ 285 * 3 = 855，比父母的宽度小9px！

哦，是的，所有div的填充，边距和边框都设置为0，DOM指标确认了这一点。

Answer 1

HTML源代码中的空格

在HTML源代码中，当您有文本或图像行或inline-block元素时，如果它们之间有任何空格（空格，制表符或新行），则只有一个空格呈现页面时，将在它们之间添加字符。例如，在以下HTML中，四个内容中的每一个之间都会出现一个空格：

one
two
<img src="three.png"/>
<span style="display: inline-block;">four<span>

这对于文本行以及出现在文本行内的小图像或HTML元素非常有用。但是当inline-block用于布局时，而不是在文本段落中添加内容的方式，这会成为一个问题。

删除额外空间

最安全，跨浏览器的方法是避免在inline-block元素之间添加额外的4px空间，即删除HTML标记之间HTML源代码中的任何空格。

例如，如果您的ul有3个浮动li标记：

<-- No space, tabs, or line breaks between </li> and <li> -->
<ul>
    <li>...</li><li>...</li><li>...</li>   
</ul>

不幸的是，这会损害网站的可维护性。除了使代码不可读之外，它严重损害了数据分离和格式化。

如果其他程序员稍后出现并决定将每个li标记放在源代码中的单独行上（不知道为什么标记位于同一行，或者可能通过HTML Tidy运行它甚至不是有机会注意到任何相关的HTML评论），网站突然有一个格式错误，可能很难识别。

考虑使用浮动元素

空白行为强烈表明，将inline-block用于一般布局目的可能不适合将其用于除了在文本段的流程中添加内容之外的任何内容。

另外，在某些情况下，inline-block内容非常难以完全样式化和对齐，尤其是在较旧的浏览器上。

其他解决方案的快速摘要

将close标记放在与下一个打开标记相同的行上，它们之间没有空格。
使用HTML注释填充close标记和下一个打开标记之间的所有空格（如@Arbel建议的那样）。
为每个元素添加负左边距（通常为-3px或-4px，基于字体大小）。我不推荐这种特殊方法。
将容器元素的font-size设置为0或0.01em。这在Safari 5中不起作用（不确定更高版本），它可能会干扰自适应设计网站，或使用除font-size以外的px单元的任何网站}。
使用JavaScript或jQuery从容器中删除仅空白文本节点。这在IE8及更早版本中不起作用，因为当元素之间只有空格时，文本节点不会在那些浏览器中创建，尽管元素之间仍然添加了空格。
为容器设置letter-spacing和word-spacing（如@PhillipWills建议的那样）。 Further info。这需要在网站上标准化em尺寸，这可能不是所有网站的合理选择。
将text-space-collapse: discard;添加到容器（以前称为white-space-collapse）。遗憾的是，任何浏览器都不支持this CSS3 style，标准尚未完全定义。

Answer 2

如果您不想弄乱HTML格式，例如将所有带有inline-block的元素写在一行中以便将来阅读，并且除去它们之间添加的额外空白区域，您可以“注释”空格。

例如，在您的代码中，这将解决问题，它甚至可以使用33.3％而不是33％：

.parent {
    width: 100%;
 }
.child{
    display: inline-block;
    width: 33.3%;
}

/ \

<div class="parent">
       <div class="child">bla-bla1</div><!-- 
    --><div class="child">bla-bla2</div><!-- 
    --><div class="child">bla-bla3</div>
</div>

Answer 3

在内部div之间添加一个空格。有一些CSS伏都教来纠正这个问题：

div {
    letter-spacing: -.31em;
    word-spacing: -.43em;
}
div div {
    letter-spacing: normal;
    word-spacing: normal;
}

当然，您可能更愿意使用类或其他东西来区分父母和孩子。

Answer 4

添加float:left;

.parent{
    width: 100%
}
.child{
    float:left;
    display: inline-block;
    width: 33%

}

http://jsfiddle.net/H6Whc/1/

Answer 5

有没有人试过显示：表？如果那不是个好主意，为什么不呢？这适用于所有现代浏览器，我将其测试到IE9。

.parent{  
    display: table;
    width: 100%;
}
.containers {
    box-sizing: border-box;
    border: 1px solid #000;
    height: 50px;
    width: 33.3%;
    display: table-cell;
}

Answer 6

许多评论和@Avin提到了这一点，但删除display: inline-block并将其替换为float: left可以使用。

.parent{
    width: 100%
}
.child{
    float:left;
    width: 33%
}

Answer 7

这是一个常见问题，但可以通过将display: table CSS属性分配给父div来非常容易地进行整理。

3个内嵌块div，正好宽度为33％，不适合父级

7 个答案: