Space between inline-block elements

Today I am going to talk about one particular css3 display type which made its existence felt in web more than what we thought of. Yes, I am talking about inline-block property.

Space between inline-block elements can be nasty at times. Can it be cured ?

A very small description of inline-block elements which I can think of:
Elements having goodness of both worlds enjoy the divine beauty of being inline-block. Two worlds? They are block and inline.

One problem that I started facing when I first started using inline-block property was very weird and thought of sharing as might save a good of time figuring out the solution.


This property comes in handy when we want to place content block side by side without using float: left. We know using float: left for such things can be problematic if the number of content block are dynamic and needs to aligned horizontally center. Also we need to take care of inducing has layout for the parent container. Micro clear fix comes in handy in this case.

Lets see the code, we have 3 divs floated side by side using float:left.

How do we center align these floated div horizontally? Well, we can use inline-block proeprty instead of float:left and assign text-align: center to the .divParent element.

Here’s what we can do

Illustration of above code


If u notice carefully each inline block element is seperated by some space, though I have not used any margin or padding. This might create an issue if wish add some margin and padding.

Solution: Modified code

Illustration of above modified code


Hope you have enjoyed this article, and follow me on twitter @sharmavijay for all the awesome blogs.

Visit for more interesting posts.