The Display Inline Block VS Float

Although my personal experience says that display:inline-block is better over float, but all main frameworks (Bootstrap, Foundation, 960 Grid etc.) use float to align their grid structure means to set elements one after another. Just because inline-block puts a gap between its kind of two elements which is non-calculable and floats not. So to calculate widths and margins properly nobody can go for inline-block.

Similarities:

• Both sets elements one after another instead of setting them one below other.
• Both give element a block level structure, which means it can have(support) a particular height, width, margin-top, margin-bottom, padding-top, padding-bottom (left and right margin and left and right padding is supported by both inline and block level elements)
• Both needs a particular width, else width will be determined by its inner content (If inner content has some definite width or in case of img the width of image and in case of text, in all browsers till the text ends and for IE7 or below till the word ends)

Differences:

• Display:inline-block puts a particular space between two Display:inline-block elements, if not written continually. ^1 Whereas Float never put any space between two elements of its kind.
• Float floats elements to left with float:left and to right with float:right. So not possible to horizontally center align any floated elements. Display:inline-block never floats so by using a text-align:center on its parent div one can easily achieve horizontally center align elements.
• Floated elements are like separate entities which have lesser concern with another floated entity content, so we cannot vertically align floated elements. Display:inline-block elements are treated as inline elements so vertical-align property works absolutely fine with them and it can be use to create fabulous entities in a page. For a good example while creating ‘listing in grid’ if our elements have uneven heights, then a better way to display it is display:inline-block with vertical-align:top; float will produce haphazard result there. For details on it you can read Displaying uneven height elements in grids

On the basis of above differences we should judge whether to use float or to use display:inline-block.

Removing the Display:Inline-Block spaces