How to remove whitespace between list items with inline-block style

Question

I have an unordered list that I need centered within a div, but also side by side. To do this, I used text-align: center; on the div, and display: inline-block; on the list items. However, when I do this, some whitespace appears between the list items. Here is a demo

html

<div class="wrap">
    <ul>
      <li>hello</li>
      <li>buddy</li>
      <li>good</li>
      <li>morning</li>
    </ul>
</div>

css

li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    border: 1px solid green;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 95%;

}

div.wrap {
    width: 500px;
    border: 1px solid red;
    text-align: center;
}

score 3 · Accepted Answer · answered Nov 11 '13 at 18:37

3

The problem comes because the elements are now treated as words when set to display: inline-block so the newline between the elements is treated as a space.

you have a few options, 1 is to remove the newline between the elements: http://jsfiddle.net/26eg9/8/

or you could also set the font size in the parent elemnt to 0 and reset in the list item as such: http://jsfiddle.net/26eg9/3/

Personally I'd prefer the second because it keeps the HTML document looking tidy.

edit: The new lines can be preserved in the first option by putting it inside the list item, only I still think this looks sloppy

answered Nov 11 '13 at 18:37

Don

3,987
15
32

Strange. Why does setting font-size to 0 on parent, then resetting it in list items remove whitespace? – Nick Rolando Nov 11 '13 at 19:07
@Shredder The spacing between inline elements is relative to the font-size. By setting it to 0, you are thus removing it.. Might add that explanation to my answer. – Josh Crozier Nov 11 '13 at 19:30
Ah, I get it. Thanks! I'll mark this as accepted because you were the first to have that solution (even though I didn't go with it) it's pretty clever. – Nick Rolando Nov 11 '13 at 19:52

score 2 · Answer 2 · answered Nov 11 '13 at 18:34

2

Inline elements respect whitespace. Literally remove the whitespace in the markup.

jsFiddle example - no whitespace between them

Updated HTML

<div class="wrap">
    <ul>
    <li>hello</li><li>buddy</li><li>you</li><li>stink</li>
    </ul>
</div>

There are alternatives, such as using negative margins (example), or setting the parent's font-size to 0px (example), then resetting the children. However, the most optimal solution that would be supported across browsers is to remove the whitespace within the markup.

answered Nov 11 '13 at 18:34

Josh Crozier

233,099
56
391
304

negative margins sounds like a horrible idea... – Don Nov 11 '13 at 18:42
@Don I am merely giving options. I state that it is better to remove the whitespace in the markup, as that will work across browsers. – Josh Crozier Nov 11 '13 at 18:44
No offense intended. Just thought I'd put it out there that as the alternatives go that one sounds horrible – Don Nov 11 '13 at 18:47

score 0 · Answer 3 · answered Nov 11 '13 at 18:39

The spaces are coming from the line breaks - HTML interprets new lines as a single whitespace character.

There are a number of ways to get around this - you can add a float to the li elements, remove whitespace from the markup, negative margins, etc. The way that seems most useful in your case is to add font-size: 0 to the container (I did it to the wrap div but you could do it on the ul if needed instead) and then set the font-size explicitly for the lis instead.

li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    border: 1px solid green;
    font-size: 16px;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 95%;

}

div.wrap {
    width: 500px;
    border: 1px solid red;
    text-align: center;
    font-size: 0;
}

Here is an updated JSFiddle.

score -1 · Answer 4 · answered Oct 10 '14 at 20:09

I had the same Problem and none of the above solutions could fix it. But I found out this works for me:

Instead of this:

<ul>
    <li>hello</li>
    <li>buddy</li>
    <li>good</li>
    <li>morning</li>
</ul>

build your html code like this:

<ul>
    <li> hello </li>
    <li> buddy </li>
    <li> good </li>
    <li> morning </li>
</ul>

How to remove whitespace between list items with inline-block style

4 Answers4