Question

我遇到<button>元素一个奇怪的问题。当它继承字体CSS属性时，它会缩小到行高。我强迫element内联，但是它的行为不像内联。我希望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>

Answer 1

这是问题所在。

.line {
  line-height: 100px;
}

如果您使用“字体：继承；”在按钮上，它将从父元素的“ .line”元素获取“ line-height”。

尝试更改行高，并使用margin或padding等其他属性在元素之间放置空格。

设置CSS字体时HTML按钮元素的高度：继承

1 个答案: