Wednesday, 7 August 2013

What is taking up space in web page?

What is taking up space in web page?

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">
<a href="link1.html">LINK1</a>
<a href="link2.html">LINK2</a>
<a href="link3.html">LINK3</a>
<a href="link4.html">LINK4</a>
<a href="link5.html">LINK5</a>
</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.

No comments:

Post a Comment