我在元素<button>遇到了一个奇怪的问题。当它继承字体 CSS 属性时，它会缩小到行高。我强制元素是内联的，但它的行为不像内联。我希望button元素的高度与span相同，因为它们都是内联元素。
问题是为什么CSS属性font: inherit会导致红色按钮缩小？
body {
font-family: "Arial";
font-size: 16px;
}
.line {
line-height: 100px;
}
.btn {
background: red;
font: inherit; /* WTF */
}
.btn1 {
background: blue;
}<!DOCTYPE html>
<html>
<body>
<div class="line"><span class="btn">Foo</span></div>
<div class="line"><button class="btn">Bar</button></div>
<div class="line"><span class="btn1">Foo</span></div>
<div class="line"><button class="btn1">Bar</button></div>
</body>
</html>这就是问题所在。
.line {
line-height: 100px;
}
如果你在按钮上使用"font：inherit;"，它将从父元素、".line"元素获得"行高"。
尝试更改行高，并使用其他属性(如边距或填充(在元素之间留出空间。