I am facing an issue with two inline unordered lists with list items as links. One list behaves as expected, while the other has a space between the link items.
ul {
list-style: none;
margin: 0;
padding: 0
}
li {
display: inline;
}
a {
border: 1px solid black;
font-size: 1rem;
}<br>
<nav>
<ul>
<li><a href="#">ONE</a>
</li>
<li><a href="#">TWO</a>
</li>
<li><a href="#">THREE</a>
</li>
</ul>
</nav>
<br>
<nav>
<ul>
<li>
<a href="#">
ONE
</a>
</li>
<li>
<a href="#">
TWO
</a>
</li>
<li>
<a href="#">
THREE
</a>
</li>
</ul>
</nav>One navigation set displays without any space between the items, while the other shows spaces in between each link item. Refer to the image for a visual representation of the issue: