html - <button> 设置 padding, margin, border 为 0 后有 excess margin

Question

下面的例子显示了一个 <button>父级高度不是按钮高度的元素。在保持语义并保持 <button> 的同时删除这个多余高度的最佳方法是什么？内联？

如果我将按钮设置为 display:block然后删除多余的高度。如果我将父项的字体大小设置为 0，那么它也会被删除。如果我更改 <button>到 <div>元素，那么它也是固定的。我不应该是语义化的吗？

我已经在稳定版的 Google Chrome 下测试过了。

.box {
  height: 30px;
  width: 30px;
  background-color: green;
}
.outer {
  background-color: blue;
}
button {
  border: 0;
  margin: 0;
  padding: 0;
}

<div class='outer'>
  <button class='box'></button>
</div>

Answer 1

<button>是一个 inline-replaced元素，所以你只需要设置 line-height CSS 中的属性。

.box {
  height: 30px;
  width: 30px;
  background-color: green;
}
.outer {
  background-color: blue;
  line-height: 0;
}
button {
  border: 0;
  margin: 0;
  padding: 0;
}

<div class='outer'>
  <button class='box'></button>
</div>

希望对您有所帮助。如果您需要任何其他帮助，请在下方发表评论。