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>

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>

• javascript
• jquery
• html
• css
• html-lists

• 4 Why are you using position relative? At the very least try deleting the top:-19px- codepen.io/Paulie-D/pen/IuLfJ – Paulie_D Commented Jun 10, 2014 at 14:55
• Have you got some separate CSS as well, or are you just referring to your inline styling (just this doesn't set the elements to display:inline as you seem to suggest). – AndrewPolland Commented Jun 10, 2014 at 14:55
• 1 What look are u trying to achieve? – Comfortably Numb Commented Jun 10, 2014 at 14:55
• @Paulie_D great one cant be more specific – codefreaK Commented Jun 10, 2014 at 14:56
• @Higeath:In accordance with what is written by TrueBlueAussie i suggest also reading these pages:cssreset./what-is-a-css-reset and cssreset. – Devima Commented Jun 10, 2014 at 15:07

3 Answers 3

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/TrueBlueAussie/4ctUx/

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/rH24P/

I would change this to use float: left instead:

http://jsfiddle/rH24P/1/

Updated CSS:

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

I think what you're looking for is something like this http://jsfiddle/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.