css - 什么 CSS 设置解释了按钮和 div 在子垂直定位中的差异？

Question

代码片段(jsFiddle):

.root * {
    cursor: default;
    font-family: Arial;
    font-size: 16px;

    padding: 0px;
    outline: none;
    border: none;

    text-align: center;

    display: inline-block;
    vertical-align: middle;
    line-height: 0px;
}

.clickable {
    background: orange;
    margin: 5px;

    box-sizing: content-box;
    width: 100px;
    height: 40px;
}

.clickable .label {
    margin: 0px;
}

<div class="root" style="padding: 60px;"><!--
 --><button class="clickable"><span class="label">label</span></button><!--
 --><div    class="clickable"><span class="label">label</span></div   ><!--
 --></div>

尽管 button 的 CSS 指令(在左边)和 div , 而对于它们的内容，是相同的，这些内容的垂直定位是完全不同的:

我想知道

what other CSS setting accounts for this difference?

(注意:“其他 CSS 设置”是指未在示例的 CSS 中明确设置的设置。)

---

编辑:

我创建了另一个 jsFiddle证明为什么@Jim 的建议(在他的评论中)并不总是有效。在这个jsFiddle , .clickable 的所有 CSS 属性(包括继承的/计算的/浏览器分配的/你命名的)和 .clickable .label类被赋予显式值。

即使这些设置没有明确区分按钮和 div，观察到的按钮和 div 之间垂直定位的差异仍然存在。

这意味着解释必须是某些设置(可能具有类似 auto 或 normal 的值)根据上下文是按钮还是 div 得到不同的解释。 这种上下文依赖性在很大程度上使 CSS 成为了活生生的 hell 。

Answer 1

影响 div 的是您的 line-height: 0px; 值。在 block 级元素上，line-height 属性指定元素内行框的最小高度。按钮或其他输入元素等元素，line-height 无效。

更新

我应该说在某些情况下 line-height 可以影响按钮。