块级元素和行内块级元素在使用宽度为100%时有什么区别？

Question

我最近一直在尝试找出何时适合使用inline-block。它们似乎比单纯的block元素更有用。事实上，一个inline-block元素似乎可以做到与block元素相同的任何事情，但需要一些额外的样式。

除了长度不同之外，具有display: inline-block; width: 100%;的元素是否不同于具有display: block;的元素？

通过阅读w3c推荐文档，我似乎找不到区别。

- uber5001

---

查看一个演示最显著的差异：http://jsbin.com/icasem/1/edit - Ilya Streltsyn

Answer 1

你所说的基本正确：“inline-block元素似乎可以做到块级元素所能做到的一切，但需要进行一些额外的样式设置。”这主要是因为它们共同拥有的一个特点，即它们都是块容器。

然而，还有一个问题。

块盒子参与块格式化上下文，而内联块参与内联格式化上下文（虽然在某些情况下，它会为其后代建立块格式化上下文，就像块盒子一样）。请参见第9.4节。基本上，这意味着内联块被视为文本，这反过来意味着通常适用于文本的大多数属性也适用于内联块。这些属性包括text-indent、text-align和vertical-align等。

这可能会导致不希望出现的副作用，您可以通过不使用display:inline-block来轻松预防。请参见此问题，了解发生什么有趣的例子。

对于内联块，盒子模型与块级盒子有所不同。第10节包含所有细节，但主要区别如下：

• 如果没有width: 100%声明，那么内联块将缩小以适应其内容。

• 因为内联块是内联流动的，所以无法使用自动左右边距使其居中。您需要使用text-align: center。毫无疑问，它必须单独一行，没有其他文本在同一行上，但如果您设置了width: 100%，那么这将不是问题。

• 内联块永远不会受到margin collapse的影响。

如果你想创建一个基于块的布局，你应该使用 display: block。一般来说，在两者之间做出决定时，你应该始终默认选择 display: block，只有在有非常好的理由时才选择 display: inline-block（不，阻止边距折叠不是我认为的一个好理由）。

- BoltClock

Answer 2

我要 echo @BoltClock 说的一切; 他提出了许多好观点。

我还要补充一点，因为 inline-block 被视为文本，所以周围的空白也被视为文本，并以它对于 block 元素不同的方式发挥作用。这经常会在试图使用 inline-block 进行布局时使人们感到困惑。这可能是使用 inline-block 的最大难点。

另一个稍微微妙的点特别适用于您的情况，即当设置 width:100% 时。在这种情况下，您需要注意使用哪个盒模型，因为标准盒模型将边框、填充和边距放置在元素的宽度之外。因此，如果您使用边框、填充或边距，您的元素实际上会占用略微超过 100% 宽度的空间。

这一点同样适用于 block 和 inline-block 元素，但更容易在 inline-block 中发生，因为区别在于 block 通常不需要设置为 width:100%，因为它默认扩展以填充宽度，而没有盒模型使其超出边缘。

为了避免这种情况，您可以通过使用 box-sizing:border-box 切换盒模型，使边框等放置在盒子内部，因此如果您要求 width:100%，就会得到这样的结果。有关更多信息，请参见 MDN box-sizing 页面。

- Spudley