What is taking up space in web page? - html

Question

I have five links all next to each other, and although they are set at 20% width, the last one goes onto the next line. However, when I set it to be 19.5%, it's fine. I made sure I set the padding and margin for body, the links, and all the containing elements to 0. Although it's not a major problem, any information on this would be appreciated.
Here is the html:
<div id="top">
<img src="someimage" />
<nav id="nav">
LINK1
LINK2
LINK3
LINK4
LINK5
</nav>
</div>
And the css:
body {
background-color: white;
margin: 0;
padding: 0;
}
#top {
background-color: #AAAAAA;
height: 50px;
}
#nav > a {
display:inline-block;
height: 25px;
width: 19.5%;
background-color: #AAAAAA;
margin: 0;
padding: 0;
text-align: center;
text-decoration: none;
color: #222222;
}
Thanks for the answers. I put comments between the tags, and it works.

Answer 1

It's the white space in between the tags. Check out this article for things you can do to combat it.
My suggestion is to simply put the HTML all on one line. It's harder to read, but renders what you want.
The best way, though, is to have a build step that will minify your HTML and get rid of all of it automatically.

Answer 2

inline-block has a problem of translating the line breaks into spaces, which might break your layout, i'd suggest you use floats instead:
#nav{
overflow:hidden;
}
#nav > a {
float: left;
height: 25px;
width: 19.5%;
background-color: #AAAAAA;
margin: 0;
padding: 0;
text-align: center;
text-decoration: none;
color: #222222;
}

Answer 3

The newline between each link translates to a space. This is the width that is being added.
You can either write all <a> tags on one line, make them float or add comments between them, like so:
<nav id="nav">
LINK1<!--
-->LINK2<!--
-->LINK3<!--
-->LINK4<!--
-->LINK5
</nav>