Why are there gaps between the elements in this unordered list?

Question

For some reason there are horizontal gaps between the <li> elements in this example, and I simply cannot fathom why they are there.

Markup

<ul>
    <li>
        Stuff
    </li>
    <li>
        Things
    </li>
    <li>
        /dev/null
    </li>
    <li>
        Use Jquery!
    </li>
</ul>

CSS

ul {
  margin:0;
  padding:0;
  height:50px;
}
ul > li {
  display:inline-block;
  background-color:silver;
  height:100%;
  width:20%;
  max-width:300px;
  list-style-type:none;
  text-align:center;
    line-height:50px;
}

What is causing these gaps?

ul {
  margin:0;
  padding:0;
  height:50px;
}
ul > li {
  display:inline-block;
  background-color:silver;
  height:100%;
  width:20%;
  max-width:300px;
  list-style-type:none;
  text-align:center;
    line-height:50px;
}

<ul>
    <li>
        Stuff
    </li>
    <li>
        Things
    </li>
    <li>
        /dev/null
    </li>
    <li>
        Use Jquery!
    </li>
</ul>

You mean the whitespaces? Remove the line breaks between each `
@Xufox Whoa, that worked! Why does whitespace in the html source affect the output? — gandalf3, Jul 31 '15 at 19:11
There were no whitespaces at that point in the HTML source. Line breaks cause this. I don’t know why. — Sebastian Simon, Jul 31 '15 at 19:13

score 3 · Answer 1 · answered Jul 31 '15 at 19:11

Add

float:left;

to ul > li to remove the gap.

ul {
  margin:0;
  padding:0;
  height:50px;
}
ul > li {
  display:inline-block;
  background-color:silver;
  height:100%;
  width:20%;
  max-width:300px;
  list-style-type:none;
  text-align:center;
  line-height:50px;
  float:left;
}

<ul>
    <li>
        Stuff
    </li>
    <li>
        Things
    </li>
    <li>
        /dev/null
    </li>
    <li>
        Use Jquery!
    </li>
</ul>

score 3 · Accepted Answer · answered Jul 31 '15 at 19:12

Those are whitespaces generated by the line breaks in the HTML source.

Remove them like so:

<ul>
    <li>
        Stuff
    </li><li>
        Things
    </li><li>
        /dev/null
    </li><li>
        Use Jquery!
    </li>
</ul>

or put comments between them:

<ul>
    <li>
        Stuff
    </li><!--
    --><li>
        Things
    </li><!--
    --><li>
        /dev/null
    </li><!--
    --><li>
        Use Jquery!
    </li>
</ul>

score 0 · Answer 3 · answered Jul 31 '15 at 19:14

0

I prefer doing like this: https://jsfiddle.net/8acpf2jt/1/

ul {
  margin:0;
  padding:0;
  height:50px;
}
ul > li {
  display:block;
    position: relative;
    float: left;
  background-color:silver;
  height:100%;
  width:20%;
  max-width:300px;
  list-style-type:none;
  text-align:center;
    line-height: 3em;
    margin: 0;
    padding: 0;
}

so, I think padding was the deal and display type.

answered Jul 31 '15 at 19:14

Eugene Kapustin

98
7

1

update: why do you need height for ul? I removed it because it doesn't needed: https://jsfiddle.net/8acpf2jt/2/ – Eugene Kapustin Jul 31 '15 at 19:15
Removing the `margin`, `padding`, and `display` declarations from your fiddle doesn't seem to change anything; what's actually fixing the gap is `float:left`. – gandalf3 Jul 31 '15 at 20:04
I did that because sometimes it can inherit these things from somewhere declared above. – Eugene Kapustin Jul 31 '15 at 20:16

Why are there gaps between the elements in this unordered list?

3 Answers3