Question

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

如果我将按钮设置为display:block，则会移除多余的高度。如果我将父级的font-size设置为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元素，因此您只需在CSS中设置line-height属性。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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>

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

2 个答案: