Неожиданное дополнение с помощью кнопки
Посмотрите это репродукция 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>Почему в каждом ли и кнопке внутри есть отступы?
Я знаю, что это связано с тем, что мы установили границу: none для кнопки, но почему li не подстраивается под новую высоту кнопки? Почему остается тонкое пространство?
Ответы 1
Отступы и элементы списка не являются причиной недостаточного пространства. Именно так автоматически рассчитывается высота элемента div при наличии дочерних элементов строкового уровня, которая зависит от высоты его строковых блоков. Поскольку кнопки имеют другой размер шрифта по умолчанию (по крайней мере, в Chrome), появляется тонкое пространство, потому что фон кнопки заполняет только меньший линейный блок. Вы можете увидеть больше пустого пространства, уменьшив размер шрифта или высоту строки. С другой стороны, если вы измените размер шрифта кнопки обратно на исходный размер, тонкое пространство также исчезнет.
.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>Вы можете видеть, что тонкое пространство исчезает после изменения отображения кнопок на 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>
Это хорошая возможность для вас начать знакомство с с помощью инспектора браузера . Чтобы узнать больше об этом сообществе и о том, как мы можем вам помочь, начните с тура и прочитайте Как спросить и связанные с ним ресурсы.