Jordan Jordan - 5 months ago 14
HTML Question

Remove blank space below empty button

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: https://jsfiddle.net/042pt648/ 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
.post-comments
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:



.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

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

button {
  display: block;
}

Or:

button {
  vertical-align: top;
}
Comments