What's the difference between `block`, `inline`, and `inline-block`?
Topics
CSS
| Property | block | inline-block | inline |
|---|---|---|---|
| Size | Fills up the width of its parent container. | Depends on content. | Depends on content. |
| 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. |
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. |
| Use Cases | Layout elements like <div>, <p>, <section>. | Used for buttons, images, and form fields that need custom sizes but stay in line with text. | Links <a>, text formatting <span>, text styling - bold <b>, italics <i>. |