CODEWITHSUNDEEP
htmlcss
Raman
Raman

Reputation: 23

Removing spaces between anchor tags

I am working on a navigation links, there is a some gaps in between the links. Got some solution for earlier questions from stackoverflow which says to remove the whitespaces between anchor tags as some browser will treat them as newline. In my case there are no spaces between thee anchor tags.

enter link description here

         <div id="nav">
            <ul>
                <li><a href="link1">Link1</a></li>
                <li><a href="link2">Link2</a></li>
                <li><a href="link3">Link3</a></li>
            </ul>
         </div>

#nav{
  background-color:#000000; 
}


#nav ul {
  height: 50px;
  padding: 0;
  margin: 0;
  text-align:center;
  border:1px solid #fff; 
}

#nav ul li { 
   display: inline-block; 
   height: 50px;
   width: 150px; 
   text-align: center; 
   border-right:1px solid #fff;
   border-left:1px solid #fff;
   list-style: none; 
   font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
   padding: 0;
   margin: 0;
   background-color: #000000;
}


 #nav ul li a{
   padding: 18px 0; 
   text-decoration: none; 
   color: white; 
   display: block;
}

Upvotes: 2

Views: 3194

Answers (3)

Felix Shin
Felix Shin

Reputation: 84

font-size: 0 should be an answer!. In my case I make div including anchor tags. After putting font-size: 0 on div, the space between anchor tags.

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

A quick solution would be to use float: left instead of display: inline-block for #nav ul li. Here's a complete article on how to remove the white space between inline-block elements using various methods.

By the way, the white space between each menu item which you see now is because of the border-right and the border-left. 

#nav{
  background-color:#000000; 
}


#nav ul {
  height: 50px;
  padding: 0;
  margin: 0;
  text-align:center;
  border:1px solid #fff; 
}

#nav ul li { 
   float: left; 
   height: 50px;
   width: 150px; 
   text-align: center; 
   border-right:1px solid #fff;
   border-left:1px solid #fff;
   list-style: none; 
   font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
   padding: 0;
   margin: 0;
   background-color: #000000;
}
<div id="nav">
            <ul>
                <li><a href="link1">Link1</a></li>
                <li><a href="link2">Link2</a></li>
                <li><a href="link3">Link3</a></li>
            </ul>
         </div>

Upvotes: 2

Zenorbi
Zenorbi

Reputation: 2634

You don't have whitespaces in the anchor tags but you do have in the li tags. The li tags are the ones with inline-block. You should either remove those as well, or use font-size: 0; on the ul tag and then reset to the correct font-size in the li tag.

You should think of inline-block elements as really big characters, that way you can understand them easier.

Upvotes: 0

Related Questions