A Space between Inline-Block List Items

Question

Possible Duplicate:
Unwanted margin in inline-block list items
How to remove “Invisible space” from HTML

Why do the inline-block list items have a space in them? No matter how I make my list items into a menu, I always get spaces.

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

When you say space "in them" what does that mean. The space char is between the
where does it have a space? Add a screenshot or a demo please — JohnP, Mar 10 '11 at 07:14
Do you mean horizontal space between each element. If you do then you can reset the margin and padding to 0 in your menu#headerMenu li definition and also remove the width 100px; — Simon H, Mar 10 '11 at 07:14

Kyle · Accepted Answer · 2014-12-01T09:36:41.823

248

I have seen this and answered on it before:

After further research I have discovered that inline-block is a whitespace dependent method and is dependent on the font setting. In this case 4px is rendered.

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.

As mentioned by other answers and comments, the best practice for solving this is to add font-size: 0; to the parent element:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

This is better for HTML readability (avoiding running the tags together etc). The spacing effect is because of the font's spacing setting, so you must reset it for the inlined elements and set it again for the content within.

edited Dec 01 '14 at 09:36

answered Mar 10 '11 at 07:22

Kyle

60,843
27
138
150

12

Actually it's due to word spacing, hence the 4px is dependent on the font setting. See http://jsfiddle.net/Cerebrl/Wt4hP/ – thomaux Jun 13 '12 at 11:44
9

Kyle, could you please update your answer so that you aren't giving people incorrect information? A 4px margin is not added to inline-block elements. As Anzeo mentions, it is due to a space being rendered between elements. The word 'margin' has specific meaning in CSS and it can mislead others into not understanding the nature of the problem. – David Bradbury Nov 22 '12 at 19:31
I know it has been two years but this is way better http://jsfiddle.net/t7dut/647/ Maybe rendering engines are different now. – 1934286 Feb 21 '13 at 09:26
If you don't want to do this, I've found that leaving off the ending tags for `
` elements fixes the issue too. It's still considered well-formed HTML.

Tyler Crompton

Feb 21 '13 at 16:41

is this the best semantic result though, running the LI tags together? – itsricky Mar 20 '13 at 06:05

Is there a better way to do this with CSS? – itsricky Mar 20 '13 at 06:06

Thank you verymuch, before time I was just manipulatingmargin. But I think its best way. – Dinesh Patra Jul 18 '15 at 10:28

An interesting article about the space between Inline Block Elements may be found [here](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) – ira Apr 27 '16 at 11:54

score 167 · Answer 2 · edited Nov 19 '13 at 17:53

167

Solution:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

You must set parent font size to 0

edited Nov 19 '13 at 17:53

KyleMit

45,382
53
367
544

answered May 18 '12 at 15:24

David Horák

5,307
8
48
74

4

Huh. I never thought about that. Makes sense. The only reason I don't upvote this answer is that I can't use percentages or ems as my UOM for font-sizes inside a list. I could solve that problem with JavaScript but that's not ideal. – Tyler Crompton May 18 '12 at 23:14
4

Great solution, worked with my complicated 2 level horizontal popup menu. – joshas May 31 '12 at 22:14
6

Down size to this method is you can't use em or % – thomaux Jun 13 '12 at 11:44
2

This trick doesn't work for Safari – leen3o Aug 08 '12 at 13:39
1

thanks, the font-size:0; solved the extra space issue for me – hanzolo Aug 09 '12 at 05:52
Confirmed that this does not work for Safari. Setting a font-size of 1px was the best workaround in my case. It still leaves an extra 1px space between elements on Safari, but in my case this negligible difference did not matter on the design. – jwinn Apr 01 '13 at 22:11
5

This is a much more elegant solution than having all `
`s in a single line/remove the white space, since one may not necessarily have access to the markup every time.

Ricardo Zea

Aug 28 '13 at 05:09

Note that there are browsers (actually only Opera that I know of, but still...) that don't make the font-size 0 if the user has set a minimum font size in the preferences. Then font-size:0 will have the same effect as font-size:9px. – Mr Lister Dec 03 '13 at 10:34

Works in safari (OSX - Versión 7.0.1). – HdN8 Feb 07 '14 at 15:20

Gerbus · Answer 3 · 2014-08-16T14:17:47.027

18

Actually, this is not specific to display:inline-block, but also applies to display:inline. Thus, in addition to David Horák's solution, this also works:

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}

edited Aug 16 '14 at 14:17

answered Aug 10 '12 at 17:35

Gerbus

2,236
25
21

2

But you can't use relative font sizes with this solution. But yes, I have thought about this myself. :) – Tyler Crompton Aug 10 '12 at 20:09
1

You can always use `rem`s, and provide fallbacks in pixels for legacy browsers. I did it and it works like a charm. – Ricardo Zea Aug 28 '13 at 05:11

score 18 · Answer 4 · edited Nov 19 '13 at 17:53

18

I would add the CSS property of float left as seen below. That gets rid of the extra space.

ul li {
    float:left;
}

edited Nov 19 '13 at 17:53

KyleMit

45,382
53
367
544

answered Jul 24 '11 at 03:43

Trevor G

205
2
2

8

I know I'm late to the party but this solution, although it does remove the spacing between the `
`s, it introduces another potential problem: You wouldn't be able center and right align the list items. If you try to do `float:right;` on the `
`s then their order will be swapped, meaning: the first item in the list would be last, the second item is the one before the last, and so on.

Ricardo Zea

Aug 28 '13 at 03:42

score 5 · Answer 5 · edited May 23 '17 at 11:47

5

Another solution, similar to Gerbus' solution, but this also works with relative font sizing.

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}

edited May 23 '17 at 11:47

Community

1
1

answered Nov 19 '13 at 17:15

Leo Pitt

69
1
3

2

Thanks for this solution. Setting font-size to zero, even if just for the UL, caused problems with my layout since I use em-sizing in some places. – Andy Giesler Jun 18 '14 at 17:31

score 3 · Answer 6 · edited Jul 01 '16 at 04:53

I had the same problem, when I used a inline-block on my menu I had the space between each "li" I found a simple solution, I don't remember where I found it, anyway here is what I did.

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

You add a comment sign between each end of, and start of : "li" Then the horizontal space disappear. Hope that answer to the question Thanks

score 1 · Answer 7 · answered Oct 11 '12 at 09:40

1

just remove the breaks between li's in your html code... make the li's in one line only..

answered Oct 11 '12 at 09:40

Mya

65
1

1

I'm not one of the downvoters, but not to be rude, this questions has already been answered. – Tyler Crompton Oct 11 '12 at 17:16
OMG. How many weeks have I been beating my head against the wall about the line break between the LI symbol and the text that follows. BTWs, this line break happened only with ridiculously large zooming. YOU ARE MY HERO! – Feb 09 '18 at 02:28

score 0 · Answer 8 · answered Dec 23 '13 at 10:55

Even if its not inline-block based, this solution might worth consideration (allows nearly same formatting control from upper levels).

ul {
  display: table;
}
ul li {
  display: table-cell;
}

IE8+ & major browsers compatible
Relative/fixed font-size independent
HTML code formatting independent (no need to glue </li><li>)

A Space between Inline-Block List Items

8 Answers8

Linked

Related