Fix the Space Stop fighting the space between Inline Block Elements

Scroll this

If you’ve been coding as long as I have then you’ll remember desperately wanting IE to adopt display: inline-block; . The need and want to control the margin and padding on “inline” elements without having to “block and float” them, oh the desire.

That was then, this is now and “inline-block” is a common occurrence in web code. But, one glaring problem arises when you use inline-block is that the whitespace in your HTML becomes visual space on screen. Why? The inline-block feature uses the browser word-space after the element, creating a great disturbance in your UI. Fear not, there are a few ways to remove that space; some of them are just disgusting, one is much nicer.

Solution 1: No white space between elements

Removing all white space between the inline-block elements in your HTML source code is considered the only reliable solution:

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

Naturally this is a pain to maintain even though it’s pratical, logical and reliable…until you are working in a CMS that does not output HTML exactly how you want it to.

Solution 2: A font-size: 0 on Parent element

Setting a font-size: 0; on the parent of the inline-block element is considered the best white-space solution. So if you had a <UL> with inline-block <LI>’s, you would do this in your CSS:

.inline-block-list {
     /* ul or ol with this class */
     font-size: 0;
}

.inline-block-list li {
     font-size: 16px; /* put the font-size back */
}

You counteract the parent font-size setting by setting the font-size for the list items, which is usually fairly simple. That is until you are in a crazy cascade of relative units that you can’t easily calculate the font size. In most cases, however, this will be exactly what you need.

Solution 3: HTML Comments

Welcome to a horrible Hack-a-HTML solution. Why oh why someone would ever choose this solution is beyond me. Using HTML comments as spacers between the elements works just as placing no space between elements would (but it could be a lot of extra coding):

<ul>
     <li>Item One</li><!--
     --><li>Item Two</li><!--
     --><li>Item Three</li>
</ul>

A very ugly solution. But it works!

Solution 4: The negative margin

You may live to regret this solution. It works by taking advantage of inline-block’s flexibility to use a negative margin to negate the space:

.line-block-list li {
     margin-left: -4px;
}

Why might you regret this solution…accounting for variable and sometimes unpredictable spacing or browser updates. Avoid at all costs! No seriously, avoid it!!!

Solution 5: Dropping Closing Element Angle Bracket

Another Hack-a-HTML solution is to simply place the closing > next to the next tag:

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

It doesn’t look as ugly as the HTML comment Hack-a-HTML solution, but it’s probably just easier to remove that whitespace and not have to worry about another developer moving all the closing brackets on you for code readability.

Solution 6: Skip the closing tag

It’s modern times and HTML5 doesn’t care if you don’t have a closing tag.

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

If you’re like me, this solution may keep you awake at night, just itching to close those tags.

None of the above solutions are ideal, but the only other alternative it to make your code extremely tough to read and troubleshoot by not spacing/indenting your HTML code, which in my opinion is an even crappier solution. Some times we have to be careful what we wish for, but the inline-block is not one of those scenarios. It is incredibly useful, it’s just important that developers know how to handle the space that comes with it correctly.

Tags: / Category: CSS3