我最近一直在尝试找出何时适合使用inline-blocks。它们似乎比block 元素有用得多。事实上，inline-block 元素似乎可以做任何块元素可以做的事情，但需要一些额外的样式。
display: inline-block; width: 100%; 的元素与display: block; 的元素有什么不同吗？ （除了一个更长的事实之外？）
我通过阅读w3c recommendation 一直在研究这个主题。我似乎找不到不同之处。
【问题讨论】：
标签： css
您所说的非常正确：“inline-block 元素似乎可以做任何块元素可以做的事情，但需要一些额外的样式。”这主要是因为两者的共同点是它们都是块容器。
但是，有一个问题。
块盒参与块格式化上下文，而内联块参与内联格式化上下文（尽管它为其后代建立块格式化上下文，就像块盒在某些条件下所做的那样）。见section 9.4。基本上，这意味着内联块被视为文本，这反过来意味着通常适用于文本的大多数属性也适用于内联块。这些属性包括text-indent、text-align 和vertical-align 等。
这可能会导致不希望出现的副作用，您可以通过首先不使用display: inline-block 来轻松预防。请参阅this question 了解可能发生的有趣示例。
内联块的盒子模型也与块盒子的模型有些不同。 Section 10 包含所有细节，但主要区别在于：
如果没有 width: 100% 声明，您可能已经猜到了，内联块将缩小以适应其内容。
因为内联块内联流动，所以不能使用自动左右边距将其居中。你改用text-align: center。不言而喻，它必须在自己的行上，并且在同一行上没有围绕它的文本，但如果您设置width: 100%，那么这将不是问题。
内联块从不受margin collapse的影响。
如果您尝试创建基于块的布局，您应该使用display: block。一般来说，在两者之间做出选择时，您应该始终默认为display: block，并且只有在您有充分理由的情况下才选择display: inline-block（不，阻止保证金崩溃不是我认为的充分理由）。
【讨论】：
我会回应@BoltClock 所说的一切；他提出了很多好的观点。
我还要补充一点，因为inline-block 被视为文本，因此周围的空白也被视为文本，因此它以block 元素不会起作用的方式发挥作用。当尝试使用inline-block 进行布局时，这经常会引起人们的注意。这可能是使用 inline-block 的最大“陷阱”。
另一个稍微微妙的点特别适用于您的情况，即设置width:100% 时。在这种情况下，您需要注意您使用的是哪种盒子模型，因为标准盒子模型会将您的边框、填充和边距放在元素宽度之外。因此，如果您使用边框、填充或边距，您的元素实际上会占用比 100% 宽度多一点的空间。
这一点同样适用于block 和inline-block 元素，但更可能出现在inline-block 中，因为区别在于block 通常不需要设置为width:100%，因为它是默认值无论如何都要扩展以填充宽度，并且没有盒子模型导致它超出边缘。
为避免这种情况，您可以使用box-sizing:border-box 切换框模型，以便将边框等放置在框内，因此如果您要求with:100%，这就是您将得到的。请参阅MDN box-sizing page 了解更多信息。
【讨论】：