block

start new line, takes up 100% of width. In other words, begins on a “new line”, and has an “carriage return” at the end. Notice how the last div with inline starts at new line:

inline

Gets appended to the left, and lines up towards the right.

They don’t have a definable height and width and will not create new rows in a layout (thus they appear “inline”).

If inline contains a block, the effect is negated. For example, in the example, the span has no effect. The testing 1 2 3 will all act like blocks.

inline-block

ref – http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Historically, we use floats to align blocks of content, we would use a container with a width to make sure they stay in place. However, a quirky behavior is that when we float the children content, it would collapse the parent div because the parent div was not floated. You can resolve this by floating the parent div, however.

In other situations, if you do not float the parent div, your next div will be awkwardly lined up to the parent’s div. What you do in that case is to clear:both for the next div, and it would notice that the parent’s div are floating left, and thus would float below them. If you don’t do this, it would float below the collapsed parent’s div.

If you were to use inline-block, you wouldn’t need a parent div at all. it would work as expected. There would be no clear hacks. However you may need to use the vertical-align because due to inline-block starting text from bottom up, rather than top down.