Whitespace bugs in styled lists

Problem: The browser wrongly interprets whitespace in the code as actual space in styled
navigation lists, thereby placing space between lists and list items. This affects lists such as
that created in Chapter 5’s “Using HTML lists and CSS to create a button-like vertical navigation
bar” exercise.

Solution: There are several solutions to this problem, the most
drastic of which is to remove whitespace from the relevant portions
of code (between the list items). You can also leave a space
between the last character of the link text and the closing </a> tag,
assuming this doesn’t compromise your layout in any way.
Otherwise, use one of the following rules:
li {
display: inline;
}
li {
float: left;
width: nnnpx;
}
li a {
display: block;
float: left;
clear: left;
width: nnnpx;
}
Note that in the preceding code, where nnnpx is shown, nnn should
be replaced with a numerical value.