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

Question

当使用<button>时里面 <div> ，我注意到如果按钮没有留下任何文本，则其下方会出现意外的空白。

这里的 fiddle 显示了它:https://jsfiddle.net/042pt648/如果您注释掉空按钮并尝试其他按钮，它们可以正常工作，下面没有空格。经查，父级div的高度好像是.post-comments当按钮为空时是不同的。当空白可见时，父div的高度为25px而按钮的高度为20px ，造成空间。在其他情况下，高度与按钮( 20px )相同，正如预期的那样。

有人能解释一下是什么原因造成的吗？

这是有问题的代码片段:

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

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

Answer 1

默认<button>是一个内联级别元素。尝试这个来消除空格:

button {
  display: block;
}

或者:

button {
  vertical-align: top;
}