how to remove gaps between navigation links

Question

I am trying to bridge the gap between navigation menus so that the red background is completely covered.

<nav>
    <a class="current_page" href="index.php"><span class="glyphicon glyphicon-home"></span> Home </a>
    <a href="blog.php"><span class="glyphicon glyphicon-pencil"></span> Blog</a>
    <a href="photography.php"><span class="glyphicon glyphicon-camera"></span> Photos </a>
    <a href="videos.php"><span class="glyphicon glyphicon-facetime-video"></span> videos</a>
    <a href="feedback.php"> Feedback </a>
    <a href="about.php"> About </a>
</nav>

and my css is:-

nav{
    background-color:red;
    padding:0px;
    margin:0px;
}

a{
  margin:0px;
  padding:5px;
  font-family:arial;
  font-size:16px;
  font-weight:bold;
  display:inline-block;
  background:#6a97d5;
}

https://jsfiddle.net/z4gLqp61/3/

@MohammadUsman Yep, it is a duplicate. [Removing `white-space` between `a` works.](https://jsfiddle.net/z4gLqp61/10/) — deEr., Apr 21 '18 at 06:22

score 0 · Answer 1 · answered Apr 21 '18 at 06:25

0

Change Margin CSS like:

 a{
    margin:0px -5px;
    padding:5px;
    font-family:arial;
    font-size:16px;
    font-weight:bold;
    display:inline-block;
    background:#6a97d5;
}

answered Apr 21 '18 at 06:25

ravi polara

564
3
14

score -1 · Answer 2 · edited Apr 23 '18 at 22:58

-1

you just need to add

a { margin-right:-4px; }

because whenever you write display:inline-block it takes an additional margin-right:4px

so, you need to remove it by adding CSS code.

edited Apr 23 '18 at 22:58

Samuel Liew

76,741
107
159
260

answered Apr 21 '18 at 06:22

BigFan

1
1

1

Please consider adding some explanation to your answer. – HMD Apr 21 '18 at 06:35

how to remove gaps between navigation links

2 Answers2