空のボタンの下の空白を削除する

Question

の中に<button>を使用すると、ボタンがテキストなしで残っていると気付かず、その下に予期しない空白が表示されます。

ここにフィーデッドが表示されます：https://jsfiddle.net/042pt648/空のボタンをコメントアウトして他のものを試してみると、下の空白なしでうまく動作します。調査の結果、クラスが.post-commentsの親divの高さは、ボタンが空の場合とは異なるようです。空白が表示されている場合、親divの高さは25pxであり、ボタンの高さは20pxで、スペースが発生します。それ以外の場合、高さはボタンと同じです（20px）。

誰かが原因を説明できますか？ここで

は、問題の抜粋です：デフォルト<button>ことで

.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 { 
    display: block; 
} 

または：

button { 
    vertical-align: top; 
}