Vertical list with stubborn gaps

Hi,
I have this code for style which I would expect to have a continuous line but there are gaps between the elements. I could fix it with outline but I wanna understand why it doesn’t work when I set the margin for 0 px. Sorry, I’m super beginner, just started 2 weeks ago. Thanks!

li {
box-sizing: border-box;
display: inline;
padding: 10px;
background-color: green;
margin: 0;
color: white;
font-weight: bold
}

This is a common problem with inline elements, the browser adds white space between them because there is actually white space in the HTML file. You could remove the white space and the problem would go away, just create your HTML as

<li>...</li><li>...</li><li>...</li>

No returns or space between the list elements. But the best way is to just use flexbox on the list element (i.e. set display: flex for the <ol> or <ul>). If that doesn’t work you could float the list elements. Apparently, leaving off the closing </li> tag will also work.

You can see a bunch of possible solutions at: