What's the difference between inline and inline-block?

I shall throw in a comparison with block for good measure.

block inline-block inline
Size Fills up the width of its parent container. Depends on content. Depends on content.

What's the difference between inline and inline-block? (Cont...)

block inline-block inline
Positioning Start on a new line and tolerates no HTML elements next to it (except when you add float) Flows along with other content and allows other elements beside it. Flows along with other content and allows other elements beside it.

What's the difference between inline and inline-block? (Cont...)

block inline-block inline
Can specify width and height Yes Yes No. Will ignore if being set.
Can be aligned with vertical-align No Yes Yes
Margins and paddings All sides respected. All sides respected. Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on line-height, even though the border and padding appear visually around the content.
Float - - Becomes like a block element where you can set vertical margins and paddings.

What's the difference between inline and inline-block? (Cont...)

block inline-block inline
Margins and paddings All sides respected. All sides respected. Only horizontal sides respected. Vertical sides, if specified, do not affect layout.

What's the difference between inline and inline-block? (Cont...)

block inline-block inline
Margins and paddings All sides respected. All sides respected. Vertical space it takes up depends on line-height, even though the border and padding appear visually around the content.

What's the difference between inline and inline-block? (Cont...)

block inline-block inline
Float - - Becomes like a block element where you can set vertical margins and paddings.
Made with Slides.com