<button> 将填充、边距、边框设置为 0 后有多余的边距

Question

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

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

我已经在谷歌浏览器的稳定版本下对此进行了测试。

.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元素，所以你只需要在CSS中设置line-height属性。

.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>

我希望这有所帮助。 如果您需要任何其他帮助，请在下面评论。

Answer 2

发生了此问题，因为空文本不会呈现，并且基线会使边距
。您只需将文本添加到按钮，然后它将更正呈现。
硬编码vertical-align也应该可以解决问题。

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

<h5>Initial issue</h5>
<div class='outer'>
  <button class='box'></button>
</div>
<hr/>
<h5>Add a text</h5>
<div class='outer'>
  <button class='box'>+</button>
</div>
<hr/>
<h5>Fix by vertical-align</h5>
<div class='outer'>
  <button class='box fix'></button>
</div>