Jordan Jordan - 1 year ago 69
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>-->

Answer Source

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

button {
  display: block;


button {
  vertical-align: top;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download