盒子模型额外像素宽度答案

【问题标题】：box model extra pixels width盒子模型额外像素宽度
【发布时间】：2014-08-27 07:41:10
【问题描述】：

感谢您阅读本文

我在布局方面遇到了一个奇怪的问题。我使用了 Meyer 的 CSS 重置。我有一个包含 3 个 div 的 div，如下所示。我还没有添加任何内容。

<div id="container">
  <div class="gallery"></div>
  <div class="gallery"></div>
  <div class="gallery"></div>
</div>

应用了以下样式

#container{
  width: 954px;
}

.gallery {
  display: inline-block;
  width: 270px;
  margin: 24px;
}

所以在我看来，每个画廊的宽度都是 24px + 270px + 24px = 318px。因此，3 个画廊 div 的组合宽度为 318px * 3 = 954px。

但是，当我将#container 的宽度增加到 960 像素时，div 只会显示在一行中。

这 6 个神秘像素从何而来？我已经仔细检查了所有其他边框、边距和填充值都是 0。我什至将轮廓设置为 0px，尽管这不应该有任何效果。

【问题讨论】：

标签： css layout width

【解决方案1】：

内部 div 设置为 display: inline-block;。这意味着它们之间的任何空白都将导致在布局中它们之间添加一个空格。

选项 1

虽然不是一个令人愉快的解决方案，但如果这样做，您将看不到额外的空间。

<div id="container">
  <div class="gallery"></div><!--
  --><div class="gallery"></div><!--
  --><div class="gallery"></div>
</div>

选项 2

另一个因不同原因而令人不快的解决方案是在#container 上设置font-size: 0;。如果您打算在其中包含文本，则需要将内部元素的font-size 设置为像素值。

#container{
  width: 954px;
  font-size: 0;
}

.gallery {
  display: inline-block;
  width: 270px;
  margin: 24px;
}

选项 3

然而，最干净的解决方案可能是将内部 div 向左浮动，并清除修复包装器。

#container{
  width: 954px;
}

#container:after {
    content: "";
    display: table;
    clear: both;
}

.gallery {
  display: inline-block;
  width: 270px;
  margin: 24px;
  float: left;
}

【讨论】：

太棒了。非常感谢。我永远不会考虑空白。在这种情况下，我将使用

【解决方案2】：

您是否尝试过“nowrap”空白？

【讨论】：

修复了症状。我从来不知道空白属性的存在。但是它并不能帮助我理解原因。不过还是谢谢大家