我最近一直试图找出何时使用inline-block s。它们似乎比block元素更有用。实际上，内联块元素似乎能够执行块元素可以执行的任何操作，但需要一些额外的样式。
display: inline-block; width: 100%;元素与display: block;元素有什么不同？ （除了一个更长的事实？）
我一直在阅读w3c recommendation来研究这个话题。我似乎无法找到差异。
答案 0 :(得分：26)
你所说的非常正确：“内联块元素似乎能够执行块元素可以执行的任何操作，但需要一些额外的样式。”这主要是因为这两者的共同之处在于它们都是块容器。
然而，有一个问题。
块框参与块格式化上下文，并且内联块参与内联格式化上下文（尽管它为其后代建立块格式化上下文，就像在某些条件下块框一样）。见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（并且不会阻止保证金崩溃不是我认为的很好的理由）。
答案 1 :(得分：3)
我会回应@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。