Question

感谢您阅读本文

我的布局有一个奇怪的问题。我已经使用了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的宽度增加到960px时，div只显示在一行中。

6个神秘像素来自哪里？我已经仔细检查了所有其他边框，边距和填充值是0.我甚至将轮廓设置为0px，尽管这不应该产生任何影响。

Answer 1

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

选项1

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

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

选项2

另一个由于不同原因而不愉快的解决方案是在font-size: 0;上设置#container。如果您打算在里面放置文本，则需要将内部元素的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;
}

Answer 2

你试过“现在”白色空间吗？

盒子模型额外像素宽度

2 个答案: