为什么HTML5 DOCTYPE与我的填充混乱？

简单的答案是：将vertical-align设置为除基线以外的任何其他值。

这样做的原因是，内联块被认为是文本，因此受到基于文本的属性，如line-height和vertical-align。

更长的答案如下：

CSS3规范涉及到框模型的工作原理的某些(可能令人困惑的)深度。这里是CSS3框规范的报价，其中我突出显示了与这个问题相关的部分：

9.5. ‘Inline-block’ or floating,non-replaced elements

… The used value of height is the computed value,
unless that is ‘auto’,when the used value is defined by “‘Auto’
heights for flow roots.”

让我们检查流根的自动高度：

9.10. ‘Auto’ heights for flow roots

In certain cases (see the preceding sections),the height of an
element is computed as follows:

• If it only has inline-level children,the height is the distance between the top of the topmost line Box and the bottom of the
  bottommost line Box.

…

线框部分是感兴趣的。这实际上意味着任何设置为显示为内联块的东西受纯文本使用的隐式盒布局。

你可能可以猜到为什么设置vertical-align修复这个问题，但让我们继续跟踪这个问题通过规范。

line-box的定义是有点little，，section 4.2的例子只是有点帮助。

让我们回到CSS 2.1规范，它在explaining line boxes做一个更好的工作：

The rectangular area that contains the Boxes that form a line is called a line Box … [its height] is determined by the rules given in the section on line height calculations.

从这个解释，我们看到line-height和vertical-align属性与如何计算(行框，因此inline-block元素)的高度有关。阅读calculations of line-height几乎说清楚：

…In case [line Boxes] are aligned ‘top’ or ‘bottom’,they must be aligned so as to minimize the line Box height.

因此，我们的inline-block元素的高度受到其隐式线框高度计算的影响，而这些计算又受这些垂直对齐计算的影响。

所以看来，当我们不使用基线作为垂直对齐的内联块，框的隐式线框将收缩到最小的大小。

混乱？ …是啊。只是跳回到较短的答案:)