Question

在<button>内使用<div>时，我注意到如果按钮没有文字，则会在其下方显示意外的空白区域。

这里的小提示显示：https://jsfiddle.net/042pt648/如果您注释掉空按钮并尝试其他按钮，它们可以正常工作而下方没有空白区域。经过调查，当按钮为空时，类.post-comments的父div的高度似乎不同。当空白区域可见时，父div的高度为25px，而按钮的高度为20px，从而产生空间。在其他情况下，高度与按钮（20px）的高度相同。

有人可以解释导致这种情况的原因吗？

以下是相关代码段：

＆＃13;

.post-comments {
  border: 1px solid blue;
}
.comment-div-toggle {
  width: 100%;
  height: 20px;
  border: none;
  margin: 0;
  padding: 0;
  background-color: gray;
  color: white;
}

＆＃13;

<div class="post-comments">
  <button class="comment-div-toggle"></button>
</div>

＆＃13;

Answer 1

默认情况下，<button>是内联级别元素。试试这个摆脱空白：

button {
  display: block;
}

或者：

button {
  vertical-align: top;
}

删除空按钮下方的空白区域

1 个答案: