Inline span's height is ignored

I have following html

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

and I set each <span>'s padding-top and padding-bottom to 10px.

But it seems like <li> doesn't change its height according to its content <span>'s height (it only adjusts according to the text size) so that the three <span>s' background overlap.

How 开发者_C百科do I solve this?

Set the spans to display:block;. Inline elements aren't aware of height and padding.

Just to follow on from tybro0103's answer, if you have something alongside the span element you can use inline-block to keep them on one line and still get control of the height. Here I am using counter-increment etc. to have numbered boxes by each element and I want them on one line.

    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>

Span is an inline element.By default its display is inline. It ignores the height and width properties , as well as margin.

Refer below page for clear idea https://www.impressivewebs.com/difference-block-inline-css/