我最近一直在尝试弄清楚何时使用inline-block是合适的。 它们似乎比block元素有用得多。 实际上，内联块元素似乎能够执行块元素可以做的任何事情，但是要有一些额外的样式。

display: inline-block; width: 100%;的元素与display: block;的元素有什么不同吗？ (除了一个更长的事实？)

我通过阅读w3c建议来研究这个主题。 我似乎找不到任何区别。

您说的很正确："内联块元素似乎可以执行块元素可以做的任何事情，但是要有一些额外的样式。"这主要是由于两者的共同点是它们都是块容器。

但是，有一个陷阱。

块框参与块格式化上下文，内联块参与内联格式化上下文(尽管它为后代建立了块格式化上下文，就像块框在某些条件下一样)。请参阅第9.4节。基本上，这意味着将内联块当作文本对待，这又意味着通常应用于文本的大多数属性也将应用于内联块。这些属性包括text-indent，text-align和vertical-align等。

这可能会导致不希望出现的副作用，您可以通过首先不使用display: inline-block来轻松避免这些副作用。请参阅此问题，以获取可能发生的有趣示例。

嵌入式块的盒模型也与块盒的盒模型有所不同。第10节包含所有细节，但主要区别在于：

• 您可能会怀疑，如果没有width: 100%声明，则内联块将缩小以适合其内容。

• 因为内联块是内联流动的，所以您不能使用自动左，右页边距将其居中。您改为使用text-align: center。不用说，它必须位于自己的行上，并且同一行上不能包含任何文本，但是如果您设置width: 100%，那么这将不是问题。

• 内联块永远不会受到边距崩溃的影响。

如果尝试创建基于块的布局，则应使用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框大小调整页面。