How to remove space between list items in navigation (HTML / CSS)

Question

I'm having trouble removing the space between the li items in navigation, I already set the margin: 0px for the item & anchor (a link) but the space/gap still exist.

How can I remove those spaces?

enter image description here

/* navigation styles */

nav {
  background: rgba(6, 19, 72, 1);
  background: linear-gradient(to bottom, rgba(6, 19, 72, 1) 0%, rgba(15, 31, 91, 1) 100%);
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.nav li {
  display: inline;
  margin: 0px;
}
nav ul.nav {
  width: 1120px;
  margin: 0 auto;
  min-width: 120px;
}
span.homeicon {
  width: 35px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');
  background-size: cover;
}
.nav a {
  display: inline-block;
  padding: 10px;
  width: 120px;
  text-decoration: none;
  color: white;
  font-family: arial;
  line-height: 30px;
  height: 30px;
  margin: 0px;
  border: 1px solid #344da7;
  border-top: none;
}
a.nav_home {
  max-width: 50px;
  width: 50px !important;
}
.nav a:hover {
  background-color: #344da7;
  height: 100%;
}

<nav>
  <ul class="nav">
    <li><a href="" class="nav_home"><span class="homeicon"></span></a></li>
    <li><a href="">SPORTS</a></li>
    <li><a href="">LIVE CASINO</a></li>
    <li><a href="">SLOTS</a></li>
    <li><a href="">POKER</a></li>
    <li><a href="">PROMOTION</a></li>
    <li><a href="">BANKING</a></li>
    <li><a href="">AFFILIATE</a></li>
  </ul>
</nav>

fiddle

Your `.nav a` is set to be 120px wide. Removing / changing that will solve the problem. — Billy, Jun 20 '15 at 09:17
Do you have a css reset: http://meyerweb.com/eric/tools/css/reset/ — Michelangelo, Jun 20 '15 at 09:17
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) — Hauke P., Jun 20 '15 at 09:20
Sorry, didn't see that you are referring to the gap outside the links (my monitor is too dark to see the border in your screenshot). Will see what caused the problem. — Billy, Jun 20 '15 at 09:21

score 7 · Accepted Answer · edited Jun 20 '15 at 10:12

These spaces are actually caused by the white space in your html.

To solve, add float: left to your <li> tags:

.nav li {
    float: left;
}

To see that it really is the whitespace in your HTML, try removing it and testing:

.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.nav li {
    display: inline;
    margin: 0px;
}
nav ul.nav {
    width: 1120px;
    margin: 0 auto;
    min-width: 120px;
}
span.homeicon {
    width: 35px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');
    background-size: cover;
}
.nav a {
    display: inline-block;
    padding: 10px;
    width: 120px;
    text-decoration: none;
    font-family: arial;
    line-height: 30px;
    height: 30px;
    margin: 0px;
    border: 1px solid #344da7;
}
a.nav_home {
    max-width: 50px;
    width: 50px !important;
}
.nav a:hover {
    background-color: #344da7;
    height: 100%;
}

<nav>
  <h1> With Whitespace </h1>
  <ul class="nav">
    <li><a href="" class="nav_home"><span class="homeicon"></span></a></li>
      <li><a href="">SPORTS</a></li>
    <li><a href="">LIVE CASINO</a></li>
    <li><a href="">SLOTS</a></li>
    <li><a href="">POKER</a></li>
    <li><a href="">PROMOTION</a></li>
    <li><a href="">BANKING</a></li>
    <li><a href="">AFFILIATE</a></li>
  </ul>
  
  <h1> Without Whitespace </h1>
  <ul class="nav">
    <li><a href="" class="nav_home"><span class="homeicon"></span></a></li><li><a href="">SPORTS</a></li><li><a href="">LIVE CASINO</a></li><li><a href="">SLOTS</a></li><li><a href="">POKER</a></li><li><a href="">PROMOTION</a></li><li><a href="">BANKING</a></li><li><a href="">AFFILIATE</a></li>
  </ul>
</nav>

score 3 · Answer 2 · answered Jun 20 '15 at 09:20

3

Try looking at https://css-tricks.com/fighting-the-space-between-inline-block-elements/

You might want to try using display: flex; instead https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Jun 20 '15 at 09:20

daxter1992

468
3
11

score 1 · Answer 3 · answered Jun 20 '15 at 09:32

The spaces are caused by white spaces. You should make sure that there are no spaces in between each li.

The best way to do so IMO:

<ul class="nav"><!--
    --><li><a href="" class="nav_home"><span class="homeicon"></span></a></li><!--
    --><li><a href="">SPORTS</a></li><!--
    --><li><a href="">LIVE CASINO</a></li><!--
    --><li><a href="">SLOTS</a></li><!--
    --><li><a href="">POKER</a></li><!--
    --><li><a href="">PROMOTION</a></li><!--
    --><li><a href="">BANKING</a></li><!--
    --><li><a href="">AFFILIATE</a></li>
</ul>

Sure, you can change your entire layout to using floats, but that is really not the best way, and kind of going backwards. inline-block was created specifically to address the problems with using floats for layout.

No, I think the best solution is to use flex boxes. What's more, most of the time this stuff is generated by server side php/ruby and so you may as well just not include the whitespace (it's easy enough to beautify in order to debug). — jcuenod, Jun 20 '15 at 09:35
Sure, flexbox works as well (and is a newer technique). But I'm suggesting the path of least resistance, since the OP's layout is already using inline-block, which is really not wrong at all. — light, Jun 20 '15 at 09:51

score 1 · Answer 4 · answered Sep 23 '19 at 09:37

1

To remove the space between the navigation items, just do this:

ul {
    font-size: 0;
}

answered Sep 23 '19 at 09:37

Ferie

1,358
21
36

good!.. and "li" with any font-size – Daniel hidalgo López Mar 17 '22 at 22:22

How to remove space between list items in navigation (HTML / CSS)

fiddle

4 Answers4