Jordan Jordan - 10 months ago 48
HTML Question

Remove blank space below empty button

When using a

inside a
, 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
while the button has a height of
, causing the space. In the other cases, the height is the same as the button(
) 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>


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

button {
  display: block;


button {
  vertical-align: top;