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

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -