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

[Anonymous]

Просмотреть этот репродукцию

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

.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 есть верхний отступ и кнопка внутри?
Я знаю, что это связано с тем, что мы установили границу: none для кнопки, но почему li не подстраивается под новую высоту кнопки?
Почему остается мало места?

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