Unwanted margin in inline-block list items

Question

I have the following HTML:

    <ul>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
    </ul>

and the following css rules:

        ul {
            padding: 0;
            border: solid 1px #000;
        }
        li {
            display:inline-block;
            padding: 10px;
            width: 114px;
            border: solid 1px #f00;
            margin: 0;
        }

        li div {
            background-color: #000;
            width: 114px;
            height: 114px;
            color: #fff;
            font-size: 18px;
        }

For some strange reason, the list items appear with a margin around them in both Firefox and Chrome. Looking at firebug, the list items do not have any margin at all, but there seems to be a void space between them.

If I later on add more list items via javascript using

$('<li><div>added via js</div></li>').appendTo($('ul'));

the "margin" doesn't appear around the new elements:

Unwanted margins

Any idea of what the hell's happening here?

Why not use `margin-right: -4px;` Is there a reason why that shouldn't work? — , May 30 '11 at 18:05
Seems like a lot of similar question get closed as the duplicate of this one, so a useful Chris Coyier link for future visitors: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — kapa, Jan 28 '13 at 19:16

score 119 · Accepted Answer · edited Dec 24 '22 at 21:44

119

This is caused by the display: inline-block;

li {
    display: inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
}

Change it to float: left;.

I thought it was the padding but took a closer look and turns out it was the display :)

Example here.

After further research I have discovered that inline-block is a whitespace dependent method and renders a 4px margin to the right of each element.

To avoid this you could run all your lis together in one line, or block the end tags and begin tags together like this:

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Example here.

edited Dec 24 '22 at 21:44

starball

20,030
7
43
238

answered Feb 11 '11 at 12:48

Kyle

65,599
28
144
152

3

So it's a bug pertaining inline-block then, or is that the intended behaviour? In my opinion it doesn't make sense at all... – Diego Feb 11 '11 at 12:55
I think you're right. I honestly don't know why it would be adding new margins, then not on the new ones. It makes no sense. This is a fix but I'm still trying to figure out the reasons behind the "bug." – Kyle Feb 11 '11 at 13:03
Found out the bug and made a fix for you :) – Kyle Feb 11 '11 at 13:10
11

It's intended behaviour. `inline-block` was meant to emulate the behaviour of the `img` tag. Whitespace around an `inline-block` element will be rendered. – Kiran Jonnalagadda May 11 '11 at 13:20
float: left fixed it for me, thanks – bbedward Apr 26 '12 at 17:13
This is much better http://jsfiddle.net/t7dut/647/. Maybe rendering engines have changed since. – user1934286 Feb 21 '13 at 09:31
Ohh, man I wish I could give 50 upvotes for this. It gave answer to most of the questions. I always wondered why Twitter Bootstrap uses combination of `display:table` and `float:left` for column layout. This is the answer for that too. – Nihar Sawant Mar 30 '13 at 20:57
4

The article mentions that it is a margin but what is happening is the inline element is rendering the word-space and line-height of the element by default. Setting word-spacing: 0, and line-height: 0 on the parent container actually fixes this if you dont want to use float: left. – chadpeppers May 21 '13 at 20:12
Is possible to do this with dynamic content? – Nov 20 '13 at 12:29
this helped me understand my similar problem, but my answer that worked best for me was `li { display:table-cell; }` – aequalsb Sep 09 '16 at 18:29

score 68 · Answer 2 · edited Jul 21 '12 at 12:43

68

I found a very good trick to overcoming this very same issue. My list items in my top menu had whitespace margins between each after i dropped "float:left;" in favor of "display:inline-block;".

Try setting your font-size for the unordered list to "0", ie:

ul { font-size:0; }
li { font-size:18px; }

Worked for me.

edited Jul 21 '12 at 12:43

Nikola K.

7,093
13
31
39

answered Dec 27 '11 at 13:29

Ryan

689
5
2

4

To support Opera, add line-height: 0px to the ul. To support Safari, you must set the font-size to 1px, not 0. (tested in Opera 12.01, Safari 5.1.7) – mhenry1384 Oct 26 '12 at 20:08
Don't use this method if you are depending on `em`s. – kapa Jan 28 '13 at 19:18
Can't believe this works, but it does. NICE. – Chris Mar 30 '13 at 13:10
This should be the accepted answer. – DanielPanic Nov 23 '15 at 14:52
this is so genius, it works!!!!!!! – nerdess Sep 12 '16 at 21:51
I know this is a super old answer, but I was tearing my hair out with an Angular ng-repeat where only the first li element had a margin. This answer solved the problem perfectly. – Ryan Hamley Aug 01 '17 at 19:13
It worked for me, but not for vertical ul list. in my case setting the `ul{ font-size:0}` and `ul li>div{ font-size: 14px}` does the trick. Very nice trick though – Roshdy Sep 16 '17 at 01:11

score 9 · Answer 3 · edited Jul 21 '12 at 12:43

Seeing this post and the answers given, I thought I would explain what's going on here. This is not a bug, but is actually the intended behavior of inline-block.

The best way to illustrate why this is the correct behavior is with smileys in a paragraph:

<p>
  Hi, really glad to hear from you yesterday 
  <img src="annoying_smiley.gif"/><img src="annoying_smiley.gif"/>.
</p>

Images are, by default, displayed as inline-block (IE: a block element which obeys the inline flow - much like a single character of text). In this case you would want the two smileys to butt up next to each other, but you would still want a space between 'yesterday' and the first smiley.

Hope this explains it, and also explains why inline-block has taken so long to be fully supported; There aren't actually many use-cases for using it as intended.

To answer your question, your best bet would be to do this:

ul {
  height: some set height
       /* OR */
  overflow-y: auto;
}

ul li {
  float: left;
}

score 7 · Answer 4 · edited Jul 21 '12 at 12:42

7

In my opinion and in this case the best thing to do is to remove the letter spacing of the li's parent and re-put it on the li!

So your CSS rule:

ul{
    padding: 0;
    border: solid 1px #000;
    letter-spacing  :-4px; /*Remove the letter spacing*/
}
li{
    display:inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
    letter-spacing  :0px; /*Put back the letter spacing*/ 

}

edited Jul 21 '12 at 12:42

Sir Crispalot

4,792
1
39
64

answered Nov 22 '11 at 12:38

DontShootMe

71
1
1

Ridiculous how well this works. Got an idea on its cross browser compatibility? – izolate Aug 28 '13 at 22:49

mx0 · Answer 5 · 2022-12-15T12:50:50.137

5

Remove all </li> tags.

<ul>
    <li>
        <div>first</div>
    <li>
        <div>first</div>
    <li>
        <div>first</div>
    <li>
        <div>first</div>
</ul>

edited Dec 15 '22 at 12:50

answered Feb 11 '11 at 12:46

mx0

6,445
12
49
54

? you mean avoiding ul at all or just taking out the closing tags?? why you should break the markup? – Damien Pirsy Feb 11 '11 at 12:51
5

@Damien Pirsy: `` tag is optional, it's safe to omit it. Here's more info: http://stackoverflow.com/questions/3008593/html-include-or-exclude-optional-closing-tags – mx0 Feb 11 '11 at 13:29
That "fixes" the problem because it removes the unwanted whitespace between the end of first `
` element and start of the second `
` element. The same result can be achieved by *not* using any indention in the source code, which I consider much better style.

Mikko Rantalainen

Jul 02 '13 at 07:33

score 4 · Answer 6 · answered Nov 04 '13 at 12:46

4

Changing display: inline-block to display: table-cell also removes the space.

    li {
        display: table-cell;
        padding: 10px;
        width: 114px;
        border: solid 1px #f00;
        margin: 0;
    }

answered Nov 04 '13 at 12:46

Mr_Green

40,727
45
159
271

Diego · Answer 7 · 2011-02-11T13:23:41.137

I just found out the reason why this happens. It appears that when using inline-block, any whitespace inside the element is rendered.

So instead of writing

    <li>
    <div>first</div>
    </li>
    <li>
    <div>first</div>
    </li>

I should write:

        <li>
            <div>first</div>
        </li><li><div>first</div>
        </li><li>....

Leaving no spaces between a li and it's closing tag. The reason why this space wasn't appearing when appending via js is because the appendTo method has all the tags without any whitespace between them. Yeah, this sucks but it's the only solution if I don't want to use float:left.

Solution found here

Indeed, when you have two inline elements (e.g. img) that you want next to each other, you can't leave any spaces in between. Same goes for elements that you want to be inline blocks. — Neil, Feb 12 '11 at 00:01

Motionharvest · Answer 8 · 2013-08-15T15:20:05.130

I found the answer to this question here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

He says:

"...there’s one giant drawback [to inline-block]. That is, since the elements become rendered inline, white-space in your HTML code will affect the rendering. That means, if we have space between the LI elements in our code, it will render a 4 pixel margin to the right of each element."

So the solution is to remove the line breaks between inline-block elements.

  <ul>
    <li><a href="#">Make</a></li>
    <li><a href="#">Love</a></li>
    <li><a href="#">Not</a></li>
    <li><a href="#">War</a></li>
  </ul>

Becomes...

<ul>
    <li>
      <a href="#">Make</a>
    </li><li>
      <a href="#">Love</a>
    </li><li>
      <a href="#">Not</a>
    </li><li>
      <a href="#">War</a>
    </li>
</ul>

And the pesky margins disappear.

its not valid with documentation list ul li. In unordered list cant aby any element as a child. So in "ul" can be only "li" and then some element inside "li" — Szymon, Oct 10 '14 at 13:54

score 1 · Answer 9 · answered Sep 17 '13 at 23:59

1

Try this solution:

    <ul><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
    --></ul>

answered Sep 17 '13 at 23:59

Oleksandr Karpov

594
3
7

Try providing an explanation with the code – krsteeve Sep 18 '13 at 00:18
It's a cheeky hack to remove the white space whilst retaining readability. The white space is what is causing the margin issue, adding comments such as this effectively removes the white space. – kirgy Aug 01 '14 at 14:11

score 0 · Answer 10 · answered Feb 11 '11 at 12:48

0

Try changing your 'display: inline-block' to 'float: left'. The separation that you are seeing then disappears. Here is a jsFiddle for you to play with:

http://jsfiddle.net/rcravens/XD9SD/

Bob

answered Feb 11 '11 at 12:48

rcravens

8,320
2
33
26

Here is an update with the javascript added. http://jsfiddle.net/rcravens/XD9SD/1/ – rcravens Feb 11 '11 at 12:52

Unwanted margin in inline-block list items

10 Answers10

Linked

Related