HTML中的UL LI标签会创建空白

Question

So I have this ul's li's and nav is changed in css to inline but for some reason when i put those few lines on the top of the page they create blank area like 3-4 lines down which I can't get rid of

<ul id="nav">
<li><span style="position: relative; top: -19px;"><a href="champions.php">Champions</a></span></li>
<li><span style="position: relative; top: -19px;"><a href="items.php">Items</a></span></li>
<li><span style="position: relative; top: -19px;"><a href="changes.php">Changes</a></span></li>
</ul>

Answer 1

First rule of UL/LIs. Get rid of the default formatting:

#nav.ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

JSFiddle to mess around with: http://jsfiddle.net/TrueBlueAussie/4ctUx/

Answer 2

Inline content is whitespace-sensitive, so you will have spaces between the element. This is typically why people will use float rather than inline when they want elements to line up next to each other.

Here is a simplified example demonstrating what I think your problem is:

http://jsfiddle.net/rH24P/

I would change this to use float: left instead:

http://jsfiddle.net/rH24P/1/

Updated CSS:

ul {
    list-style: none;
}
li {
    background: #ccc;
    float: left;
}

Answer 3

I think what you're looking for is something like this http://jsfiddle.net/4QR2v/

Remove your inline styling and use the following CSS instead:

#nav{
    margin:0;
    padding:0;
    list-style: none;
}

#nav li{
    display:inline;
}

The margin:0 and padding:0 removes the default formatting on lists (which may be the gap you're referring to). And the display:inline puts everything on one line.