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

This is a common problem but I can't figure out why it happens.

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

I have a parent div and inside that div I have 3 divs with width set to 33% (exactly, not 33.3%!) and display: inline-block.

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

In Chrome it works well, but in Mozilla and Opera it does not (I didn't test it in IE yet). I thought the problem might be in the algorithm browsers use to calculate pixel sizing from percentages. But when I checked the DOM metrics, I found that the parent's width is 864px and the child's is 285px (that's correct: 864 * .33 = 285.12). But why doesn't it fit in the parent? 285 * 3 = 855, that's 9px less than parent's width!

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

Oh, yes, padding, margin and border for all divs set to 0 and DOM metrics confirm that.

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

7 个解决方案

#1

Whitespace in the HTML source code

HTML源代码中的空格

In the HTML source code, When you have lines of text or images, or elements that are inline-block, if there is any whitespace between them (blank spaces, tabs, or new lines), a single blank space character will be added between them when the page is rendered. For example, in the following HTML, a blank space will appear between each of the four pieces of content:

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

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

This is very helpful for lines of text, and for small images or HTML elements that appear inside a line of text. But it becomes a problem when inline-block is used for layout purposes, rather than as way to add content inside a paragraph of text.

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

Removing the extra space

删除额外的空间

The safest, cross-browser way to avoid the extra 4px or so of space that's added between inline-block elements, is to remove any whitespace in the HTML source code between the HTML tags.

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

For instance, if you have a ul with 3 floated li tags:

例如，如果你有一个带有3个浮动li标签的ul：

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

Unfortunately, this hurts the maintainability of the website. Besides making the code unreadable, it severely compromises the separation of data and formatting.

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

If another programmer comes along later and decides to put each li tag on a separate line in the source code (unaware of why the tags were on the same line, or possibly running it through HTML Tidy and not even having a chance to notice any related HTML comments), suddenly the website has a formatting bug that may be difficult to identify.

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

Consider floating elements instead

请考虑使用浮动元素

The whitespace behavior strongly suggests that it may be inappropriate to use inline-block for general-layout purposes, to use it for anything other than adding content inside the flow of a paragraph of text.

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

Plus, in some cases inline-block content is very difficult to fully style and align, especially on older browsers.

此外，在某些情况下，内联块内容很难完全样式化和对齐，尤其是在旧版浏览器上。

Quick summary of other solutions

其他解决方案的快速摘要

Put the close tag on the same line as the next open tag, with no white space between them.
将close标记放在与下一个打开标记相同的行上，它们之间没有空格。
Use HTML comments to fill all of the whitespace between the close tag and the next open tag (as @Arbel suggested).
使用HTML注释填充close标记和下一个打开标记之间的所有空格（如@Arbel建议的那样）。
Add a negative left margin to each element (usually -3px or -4px, based on the font-size). I don't recommend this particular approach.
为每个元素添加一个负的左边距（通常为-3px或-4px，基于字体大小）。我不推荐这种特殊方法。
Set the font-size for the container element to 0 or 0.01em. This doesn't work in Safari 5 (not sure about later versions), and it may interfere with Responsive Design websites, or any website that uses a font-size unit other than px.
将容器元素的font-size设置为0或0.01em。这在Safari 5中不起作用（不确定更高版本），它可能会干扰响应式设计网站或使用除px之外的字体大小单位的任何网站。
Remove whitespace-only text nodes from the container using JavaScript or jQuery. This doesn't work in IE8 and earlier, as text nodes are not created in those browsers when there's only whitespace between elements, though space is still added between the elements.
使用JavaScript或jQuery从容器中删除仅空白文本节点。这在IE8及更早版本中不起作用，因为当元素之间只有空格时，文本节点不会在这些浏览器中创建，尽管元素之间仍然添加了空格。
Set letter-spacing and word-spacing for the container (as @PhillipWills suggested). Further info. This requires standardizing em sizes on the website, which may not be a reasonable option for all websites.
设置容器的字母间距和字间距（如@PhillipWills建议的那样）。更多信息这需要在网站上标准化em大小，这可能不是所有网站的合理选择。
Add text-space-collapse: discard; to the container (previously called white-space-collapse). Unfortunately, this CSS3 style is not yet supported by any browsers, and the standard hasn't been fully defined.
添加文本空间崩溃：丢弃;到容器（以前称为白空间崩溃）。不幸的是，任何浏览器都不支持这种CSS3风格，并且该标准尚未完全定义。

#2

If you don't want to mess up the HTML formatting e.g. having all the elements with inline-block written in one line for future readability and also get rid of the extra white space that is added between them, you can "comment" the white space.

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

For example in your code this will solve the problem, it will even work with 33.3% instead of 33%:

例如，在您的代码中，这将解决问题，它甚至可以使用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>

#3

A space is added between the inner divs. There is some CSS voodoo to correct this problem:

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

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

Of course, you'll probably prefer to use classes or something to differentiate between parent and children.

当然，您可能更喜欢使用类或其他东西来区分父级和子级。

#4

Add float:left;

添加浮动：左;

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

}

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

#5

Has anyone tried display: table? If that's not a good idea, why not? This works in all modern browsers and I tested it down to IE9.

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

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

#6

This is a mentioned by a number of comments and by @Avin, but removing display: inline-block and replacing it with float: left works.

这是由许多评论和@Avin提到的，但删除display：inline-block并用float：left替换它。

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

#7

-1

This is a common problem, but it can be sorted out very easily by assigning the display: table CSS property to the parent div.

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

#1