我最近一直试图弄清楚何时使用内联块。它们似乎比只是块元素更有用。事实上，一个内嵌块元素似乎能够做任何一个块元素可以做的事情，但有一点额外的样式。
是否有任何理由显示一个元素：inline-block;宽度：100％;与显示：块的元素有所不同(除了一个更长的事实？)
我一直在研究这个话题，阅读w3c recommendation.我似乎找不到区别。
解决方法
你所说的是非常正确的：“一个内嵌块元素似乎能够做任何一个块元素可以做的，但是有一点额外的造型。但是，有一个catch。
块级元素参与块格式化上下文，并且内联块参与内联格式化上下文(尽管它本身可以像块级元素一样创建块格式化上下文)。参见section 9.4.基本上，这意味着一个内联块似乎是文本，这反过来意味着通常应用于文本的大多数属性也将应用于内联块。这些属性包括文本缩进，文本对齐和垂直对齐等。
这可能会导致不必要的副作用，您可以通过不使用display：inline-block来轻松防止。有关可能发生的一个有趣的例子，请参阅this question。
内嵌框框的框模型与块框的框模型也有所不同。 Section 10包含所有的细节，但主要区别是：
>没有width：100％声明，你可能怀疑，内嵌块将缩小以适应其内容。
>因为内联块内嵌流动，所以您无法将其与自动左右边距对齐。您可以使用text-align：center。不用说，它必须在自己的行上，没有在同一行上的文本，但如果你设置width：100％，那么这不会是一个问题。
>内嵌块不会受到margin collapse的影响。
如果您要创建基于块的布局，则应使用display：block。一般来说，在两者之间决定时，你应该总是默认显示：block，而只能选择display：inline-block如果你有一个非常好的理由(而不是，阻塞边缘崩溃不是我会考虑的一个好的原因)。
