Q:

UL LI tags in html create blank space

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>

A:

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/

