Space Between List Items with Inline Block (Fixed)

Posted on February 3, 2015 by Dan Doicaru in HTML/CSS Category

I bet everybody had or still has the problem with the space between list items when display: inline-block is applied to li elements. The good news is that you can fix this space using some simple tricks.

To see this problem live, I wrote a tutorial about aligning lists (and others elements) inside a div, useful when a user wants, for example, to align his website menu to center and list items must have inline-block display. This will generate a space between each list item, because of an invisible space character.

Here is an example with the problem:

--------------------- HTML ---------------------

<div class="container">
	<ul>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
	</ul>
</div>

---------------------- CSS ----------------------

.container {
	text-align: center;
	border: 1px solid green;
}
.container ul {
	display: inline-block;
	margin: 10px 0;
	padding: 0;
}
.container li {
	display: inline-block;
}
.container li a {
	background: #444;
	color: #FFF;
	text-decoration: none;
}

And the results:

Space Between List Items

As you can see there is impossible to put these list items one near each other, without writing additional CSS. You can find more info about display property here.

Fixing the Space Between List Items

The easiest method is to give float: left and display: inline-block to <li> elements. This trick can have disadvantages in other environments and it's kinda strange (float usually points elements to left and breaks text-align property), but here it does the job.

--------------------- HTML ---------------------

<div class="container">
	<ul>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
	</ul>
</div>

---------------------- CSS ----------------------

.container {
	text-align: center;
	border: 1px solid green;
}
.container ul {
	display: inline-block;
	margin: 10px 0;
	padding: 0;
}
.container li {
	float: left;
	display: inline-block;
}
.container li a {
	background: #444;
	color: #FFF;
	text-decoration: none;
	float: left;
}

Float Fix Space Between List Items With Inline Block

From Where is that Blank Space?

This space between list items is actually generated by the white space between list items. As a second trick, you can only change the HTML and write all <li> items in one line, without giving any float to elements. Give it a try. Check the sample below:

--------------------- HTML ---------------------

<div class="container">
	<ul>
		<li><a href="#">Button</a></li><li><a href="#">Button</a></li><li><a href="#">Button</a></li>
	</ul>
</div>

---------------------- CSS ----------------------

.container {
	text-align: center;
	border: 1px solid green;
}
.container ul {
	display: inline-block;
	margin: 10px 0;
	padding: 0;
}
.container li {
	display: inline-block;
}
.container li a {
	background: #444;
	color: #FFF;
	text-decoration: none;
}

Float Fix Space Between List Items With Inline Block

Update (January 14, 2016)

As I forgot from the first time to write this main solution by giving font-size: 0; to the container that wraps the elements with white-space. The actual space created between elements is just an invisible character, and if the font size is 0 the actual character will disappear.

In our case, to solve the space between list items, you must set font size 0 to main <ul> and another normal font size (14 pixles for example) for list items.

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

Now the blank space is solved. The extra character created by a simple space has now font size 0, which is not visible in the content.

Other Solutions

There are other few ways to get rid of that blank space between list items, which I don't recommend you to use them. First one is to add negative margin-left, about 4 pixels, to get rid of that space. This method is not that compatible in Internet Explorer.

.container li {
	display: inline-block;
	margin-left: -4px;
}

The second strange solution, you can delete the ending tag </li> and let the browser to render it for you. I recommend you to not use this method at all. This is slow for browsers and is not a valid HTML code.

<ul>
	<li><a href="#">Button</a>
	<li><a href="#">Button</a>
	<li><a href="#">Button</a>
</ul>

Conclusion

In the end, you don't need any fancy tricks to fix the space between list items or advanced CSS techniques. No, this is just caused by your browser.

When you add a new line in your HTML to keep your code clean and indented, browser treats that new line like a simple space, which is added when the page is rendered.

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.50 out of 5)
Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 4 = 10

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.