0

I have two inline ul li a lists. One is what I would expect and the other has a space between the a 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>

What I get is two inline navigation sets one without a space between the items and another with a space. Here is an image of the resulting code: Why?

two inline nav arrays of three

j08691
  • 204,283
  • 31
  • 260
  • 272
bartonlp
  • 123
  • 1
  • 6
  • In addition to all other answers, you can really remove (not just hide) those whitespaces via `for(list of document.getElementsByTagName("ul"))for(node of list.childNodes)if(node.nodeType===3)node.remove();` – Syntac Oct 09 '16 at 21:28

2 Answers2

0

When HTML has whitespace which goes on for some time, the web browser interprets it as one space. Simply remove the whitespace where ONE TWO THREE is.

desbest
  • 4,746
  • 11
  • 51
  • 84
0

In first case whitespaces placed outside anchor tags. In second, spaces are placed inside. So link text include whitespace.

YD1m
  • 5,845
  • 2
  • 19
  • 23