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.
What's the difference between inline and inline-block?
