A space between inline-block list items
css, html, xhtml
Solution
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 `li`s 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.
Problem
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> ```