html - What is taking up space in web page? -
i have 5 links next each other, , although set @ 20% width, last 1 goes onto next line. however, when set 19.5%, it's fine. made sure set padding , margin body, links, , containing elements 0. although it's not major problem, information on appreciated.
here 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 css:
body { background-color: white; margin: 0; padding: 0; } #top { background-color: #aaaaaa; height: 50px; } #nav > { display:inline-block; height: 25px; width: 19.5%; background-color: #aaaaaa; margin: 0; padding: 0; text-align: center; text-decoration: none; color: #222222; }
thanks answers. put comments between tags, , works.
the newline between each link translates space. width being added.
you can either write <a>
tags on 1 line, make them float or add comments between them, so:
<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>
Comments
Post a Comment