Jordan Jordan - 4 months ago 12
HTML Question

Why does this empty button element cause a blank space below it?

When using a button inside a div, I've noticed if the button is left with no text, an unexpected white space appears below it. The fiddle here shows it: If you comment out the empty button and try the others, they work fine without a white space below. Upon investigation, it seems the height of the parent div with class

is different when the button is empty. When the white space is visible, the parent div has a height of 25px while the button has a height of 20px, causing the space. In the other cases, the height is the same as the button(20px) just as expected. Could someone explain what is causing this?

Here is the snippet in question:

<div class="post-comments">
<button class="comment-div-toggle"></button>
<!--<button class="comment-div-toggle"><i class="fa fa-chevron-down"></i></button>-->
<!--<button class="comment-div-toggle">Button</button>-->


By default <button> is an inline level element. Try this to get rid of the whitespace:

button {
  display: block;


button {
  vertical-align: top;