Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?

Question

Is there a practical difference between whether a left-floated element (say, and image) has display: inline-block; applied to it, as opposed to leaving the default display:

Answer 1

You don't have to specify a float: left and a display: inline-block for the same element, you use one or the other, not both. Float is used to float text around elements, its not the best weapon to choose when doing a layout. Go with display: block, and inline-block.

http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

Block elements — form boxes according to the css box-model. They have width, height, padding, border, and margin and they stack vertically on top of each other.

Inline elements — don’t form boxes. They sit horizontally next to each other.

Inline-block elements — act like block elements on the inside where they form boxes. On the outside they act like inline elements sitting horizontally next to each other instead of stacking on top of each other.

A good resource: http://learnlayout.com/inline-block.html

According to SitePoint:

If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.

Don’t be fooled. You’re being brainwashed.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/