Space between inline-block elements

Space between inline-block elements – Why and how to remove it?

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 is introduced by white-space equivalent to the width of one character on the inherited font. Common way to get around this would be to remove any line-breaks or space between inline-block elements html code.

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.

Example

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
inlineblock1
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
inlineblock2

Hope you have enjoyed this article, and follow me on twitter @sharmavijay for all the awesome blogs. Visit Frontend Tricks for more interesting posts.
  • Gavin Roberts

    Or you could do:

    div 1div 2div 3

    or

    div 1div 2div 3

    Which will replicate the same effect.

    • http://nocode.in Vijay Sharma

      these spaces between inline block elements can be removed easily by placing the div’s side-by-side without any space, but its becomes really painful in maintaing the divs the same way you wrote. Other devs might re-indent and some IDE’s do that automatically.

  • Roman

    As I know, this trick not work in Safari for Win. But, who use Safari for Win? ))

    • http://nocode.in Vijay Sharma

      @Roman, Thanks for reading. It did work in safari 5.1 win. If you let me know which version, then I might look that as well.

  • http://www.sadiqevani.com/ Sadi Qevani

    Hi,

    Why not place Negative margins :) that would be easier, and you would have less hassle. I mean let say you need text on the divparent element :)

    You clearly specified font-size 0, text-align: center. you have to rewrite this rules again on the element.

    And rewriting rules is a bad practice :)

    Anyway keep up with your work :)

    • http://nocode.in Vijay Sharma

      Thanks Sadi!
      Negative margins are risky, initially I did the same thing in one of projects :). Negative margin will be proportional to the parentDiv’s font size and again it has to be formulated for responsive layouts as well.
      Not sure what exactly is a bad practice? To save tons of headache with these spaces, this works very fine. :)

  • Pingback: Space between inline-block elements | NYC Startup News