Navbar has unexplained gaps between links

Question

When I hover over the li, theres a gap to the left and I can't find anything in developer console that explains it.

.custom-nav>li {
  padding: 1.5em 1em;
  border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
  padding: 1.5em 1em;
}
.custom-nav>li:hover {
  background: #777;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — George, Aug 04 '15 at 15:43

score 2 · Accepted Answer · answered Aug 04 '15 at 15:42

Bootstrap makes the list items inline elements, and inline elements are sensitive to white space. Just remove the white space between them:

.custom-nav>li {
  padding: 1.5em 1em;
  border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
  padding: 1.5em 1em;
}
.custom-nav>li:hover {
  background: #777;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav">
        <li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

You can also use HTML comments to occupy the white space instead:

<li><a href="#">Link</a></li><!--
--><li><a href="#">Link</a></li><!--
--><li><a href="#">Link</a></li>

score 0 · Answer 2 · answered Aug 04 '15 at 15:52

Line break between inline elements creates a whitespace. There are several ways to fight it: to set font-size of parent to 0px, to remove line breaks, to comment

line breaks like that:
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav"><!--
        --><li><a href="#">Link</a></li><!--
        --><li><a href="#">Link</a></li><!--
        --><li><a href="#">Link</a></li><!--
      --></ul>
    </div>
  </div>
</div>

Fiddle demo

score 0 · Answer 3 · answered Aug 04 '15 at 15:55

0

I would suggest you to add these CSS options (and then go further with editing CSS):

.list-inline > li {
    display: block;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
}

answered Aug 04 '15 at 15:55

Eugene Kapustin

156
8

Navbar has unexplained gaps between links

3 Answers3