Unexpected padding with a button

Question

See this repro jsfiddle

.test {
  width: 10rem;
  list-style: none;
  margin: 0;
}

ul.test li {
  background: black;
  padding: 0;
}

ul.test li button {
  background: red;
  border: none;
}

<ul class="test">
  <li>
    <div>
      <button>
  Hello
  </button>
    </div>
  </li>
  <li>
    <div>
      <button>
  World
  </button>
    </div>
  </li>
</ul>

Why is there a padding top in each li and the button inside ?

I know it comes from the fact that we have set border: none to the button but why doesn't the li adjust to the button new height ? Why does it leave a thin space?

Answer 1

Paddings and list items are not what is causing the thin space. It's how the automatic height of a div is calculated when there is an inline-level children, which is based on its line-boxes height. Since the buttons have a different default font-size (at least in Chrome), the thin space appears because the background of the button only fills the smaller line box. You can see a bigger empty space by reducing the font-size or line-height. On the other hand, if you change the font-size of the button back to the initial size, the thin space will disappear as well.

.test {
  width: 10rem;
  list-style: none;
  margin: 0;
}

ul.test li {
  background: black;
  padding: 0;
}

ul.test li button {
  background: red;
  border: none;
  font-size: inherit;
}

<ul class="test">
  <li>
    <div>
      <button>
          Hello
        </button>
    </div>
  </li>
  <li>
    <div>
      <button>
          World
        </button>
    </div>
  </li>
</ul>

You can see that the thin space disappears after changing the display of the buttons to display:block.

.test {
  width: 10rem;
  list-style: none;
  margin: 0;
}

ul.test li {
  background: black;
  padding: 0;
}

ul.test li button {
  background: red;
  border: none;
  display: block;
}

<ul class="test">
  <li>
    <div>
      <button>
        Hello
      </button>
    </div>
  </li>
  <li>
    <div>
      <button>
        World
      </button>
    </div>
  </li>
</ul>