內嵌跨度的高度被忽略

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>的高度（它只能根據文本大小調整）沒有改變其高度，以便三個背景重疊。

我該如何解決這個問題？

Answer 1

將跨度設置爲display:block;。內聯元素不知道高度和填充。

Answer 2

剛纔從tybro0103的回答中可以看出，如果你在span元素旁邊有一些東西，你可以使用inline-block將它們保持在一行，並且仍然可以控制高度。在這裏，我正在使用計數器增加等，每個元素都有編號框，我希望它們在一行上。

span.messageBody { 
background-color:green; 
padding: 2em; 
display:inline-block; /* Make the span able to grow in height */ 
line-height: 20px; 
height:2em; 
} 

/* The numbering boxes */ 
.ranking { 
counter-reset: ranking; 
} 

span.messageBody::before { 
counter-increment: ranking; 
content: counter(ranking); 
display: inline-block; 
width: 2em; 
text-align: center; 
position: relative; 
top: -.5em; 
left: -.5em; 
background: hsl(45, 70%, 80%); 
color: hsl(202, 80%, 30%); 
opacity: 0.7; 
} 

<ul class="ranking"> 
<li><span class="messageBody">1</span></li> 
<li><span class="messageBody">2</span></li> 
</ul>