small white-space between li items

Question

I've got a pretty simple navbar index consisting of 4 <li> items. I have properly styled them all, and looked back, checked to make sure everything is the way it should be.

However, for some reason a small white space appears in between all of my <li> items for no reason.

This is what it currently looks like:

and this is the desired result:

There doesn't seem to be any fixes on the net (or at least ones that I can find).

This is my CSS and HTML:

/* relevant css */

.index-navigation {
  display: inline-block;
  width: auto;
  height: 45px;
}
.index-navigation ul li {
  display: inline-block;
  width: 120px;
  padding-top: 13px;
  padding-bottom: 10px;
  background-color: #000;
  text-align: center;
}
.index-navigation ul li a {
  color: #FFF;
  font-size: 1.2em;
  font-family: helvetica;
  text-decoration: none;
}

<!-- relevant HTML !-->

<div class="index-navigation navigation-scroll">
  <ul>
    <li>
      <a href="#">HOME</a>
    </li>
    <li>
      <a href="#">FEATURED</a>
    </li>
    <li>
      <a href="#">FORUMS</a>
    </li>
    <li>
      <a href="#">SUPPORT</a>
    </li>
  </ul>
</div>

All help is appreciated,

Cheers

http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements — Nenad Vracar, Jul 04 '16 at 11:52
@NenadVracar checked that out just before I posted this.. None of those solutions worked for me — GROVER., Jul 04 '16 at 11:54

score 2 · Answer 1 · answered Jul 04 '16 at 11:53

The inline-block property does not avoid to interpret the break line of your code. Meaning that all break line of your <li> are rendered. This is the space you can see.

One trick is to add comment like this to remove empty spaces, and to keep the html formalism.

<div class="index-navigation navigation-scroll">
  <ul>
    <li>
      <a href="#">HOME</a>
    </li><!--
    --><li>
      <a href="#">FEATURED</a>
    </li><!--
    --><li>
      <a href="#">FORUMS</a>
    </li><!--
    --><li>
      <a href="#">SUPPORT</a>
    </li>
  </ul>
</div>

Haha, that's very odd! Thanks for the answer :) – GROVER. Jul 04 '16 at 11:55 — GROVER., Jul 04 '16 at 11:55

score 1 · Accepted Answer · answered Jul 04 '16 at 11:51

1

Add float:left to the below style.

.index-navigation ul li {
    display: inline-block;
    width: 120px;
    padding-top: 13px;
    padding-bottom: 10px;
    background-color: #000;
    text-align: center;
    float: left;
}

answered Jul 04 '16 at 11:51

Nehemiah

1,063
7
15

Hmm, that's strange.. Is there a reason that it has blank space? – GROVER. Jul 04 '16 at 11:52

score 0 · Answer 3 · answered Jul 04 '16 at 11:55

Remove inline-block and put inline for li

/* relevant css */

.index-navigation {
  display: inline-block;
  width: auto;
  height: 45px;
}
.index-navigation ul li {
  display: inline;
  padding-left: 10px;
  padding-right:10px;
  width: 120px;
  padding-top: 13px;
  padding-bottom: 10px;
  background-color: #000;
  text-align: center;
  margin:none;
}

.index-navigation ul li a {
  color: #FFF;
  font-size: 1.2em;
  font-family: helvetica;
  text-decoration: none;
}

<!-- relevant HTML !-->

<div class="index-navigation navigation-scroll">
  <ul>
    <li>
      <a href="#">HOME</a>
    </li>
    <li>
      <a href="#">FEATURED</a>
    </li>
    <li>
      <a href="#">FORUMS</a>
    </li>
    <li>
      <a href="#">SUPPORT</a>
    </li>
  </ul>
</div>

small white-space between li items

3 Answers3