Неожиданное дополнение с помощью кнопки ⇐ CSS

[Anonymous]

См. этот репродукция
jsfiddle

Код: Выделить всё

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

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

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

Код: Выделить всё

[list]
[*]


Hello


[*]


World


[/list]

Почему в каждой строке li есть отступ сверху, а внутри — кнопка?< /p>
Я знаю, что это связано с тем, что мы установили границу: none для кнопки, но почему li не подстраивается под новую высоту кнопки? Почему остается мало места?

Подробнее здесь: https://stackoverflow.com/questions/787 ... h-a-button