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?
By Code 100mph
What's the difference between inline and inline-block?
- 161