代码片段(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 。
最佳答案
影响 div 的是您的 line-height: 0px;
值。在 block 级元素上,line-height
属性指定元素内行框的最小高度。按钮或其他输入元素等元素,line-height
无效。
更新
我应该说在某些情况下 line-height
可以影响按钮。
关于css - 什么 CSS 设置解释了按钮和 div 在子垂直定位中的差异?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32233220/