内联跨度的高度被忽略

Question

我有以下html

<ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
</ul>

我和每个设置<span>的padding-top和padding-bottom来10px.

但似乎<li>并没有根据其内容<span>的高度改变它的高度(它只根据文本大小调整),以便三个<span>s'背景重叠.

我该如何解决这个问题？

Answer 1

将跨度设置为display:block;.内联元素不知道高度和填充.