Html 3 个宽度正好为 33% 的内联块 div 不适合父级

3 inline-block divs with exactly 33% width not fitting in parent

提问by Roman Bekkiev

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%！）和display: 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 指标时，我发现父级的宽度为 864 像素，子级的宽度为 285 像素（正确：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 指标证实了这一点。

回答by Matt Coughlin

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 源代码中，当您有几行文本或图像或元素时inline-block，如果它们之间有任何空格（空格、制表符或新行），则它们之间将添加一个空格字符，当页面呈现。例如，在下面的 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-blockis used for layout purposes, rather than as way to add content inside a paragraph of text.

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

Removing the extra space

删除多余的空间

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

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

For instance, if you have a ulwith 3 floated litags:

例如，如果您有ul3 个浮动li标签：

<-- 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 litag 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-blockfor general-layout purposes, to use it for anything other than adding content inside the flow of a paragraph of text.

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

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

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

Quick summary of other solutions

其他解决方案的快速总结

1. Put the close tag on the same line as the next open tag, with no white space between them.
2. Use HTML comments to fill all of the whitespace between the close tag and the next open tag (as @Arbel suggested).
3. Add a negative left margin to each element (usually -3px or -4px, based on the font-size). I don't recommend this particular approach.
4. Set the font-sizefor 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 Designwebsites, or any website that uses a font-sizeunit other than px.
5. 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.
6. Set letter-spacingand word-spacingfor the container (as @PhillipWills suggested). Further info. This requires standardizing emsizes on the website, which may not be a reasonable option for all websites.
7. Add text-space-collapse: discard;to the container (previously called white-space-collapse). Unfortunately, this CSS3 styleis not yet supported by any browsers, and the standard hasn't been fully defined.

1. 将关闭标签与下一个打开标签放在同一行，它们之间没有空格。
2. 使用 HTML 注释填充关闭标签和下一个打开标签之间的所有空白（如@Arbel 建议的那样）。
3. 为每个元素添加一个负的左边距（通常是 -3px 或 -4px，基于字体大小）。我不推荐这种特殊的方法。
4. 将font-size容器元素的设置为 0 或 0.01em。这不工作在Safari 5（不知道以后的版本），它可能会干扰响应式设计的网站，或任何网站，使用font-size单位比其他px。
5. 使用 JavaScript 或 jQuery 从容器中删除纯空白文本节点。这在 IE8 及更早版本中不起作用，因为当元素之间只有空格时，不会在这些浏览器中创建文本节点，尽管元素之间仍然添加了空格。
6. 为容器设置letter-spacing和word-spacing（如@PhillipWills 建议的那样）。更多信息。这需要标准化em网站的大小，这可能不是所有网站的合理选择。
7. 添加text-space-collapse: discard;到容器（以前称为white-space-collapse）。不幸的是，这种 CSS3 样式还没有被任何浏览器支持，并且标准还没有完全定义。

回答by Arbel

If you don't want to mess up the HTML formatting e.g. having all the elements with inline-blockwritten 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 格式，例如将所有元素inline-block写在一行中以备将来可读，并且还不想在它们之间添加额外的空格，则可以“注释”空格。

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>

回答by philwills

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.

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

回答by Avin Varghese

Add float:left;

添加 float:left;

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

}

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

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

回答by eaglejs

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.

有人试过 display: table 吗？如果这不是一个好主意，为什么不呢？这适用于所有现代浏览器，我测试了它到 IE9。

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

回答by bvpb

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

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

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

回答by Vivek Mehta

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

这是一个常见的问题，但是通过将display: tableCSS 属性分配给父 div可以很容易地解决它。