13 lines
1.0 KiB
Plaintext
13 lines
1.0 KiB
Plaintext
---
|
|
title: What's the difference between `block`, `inline`, and `inline-block`?
|
|
---
|
|
|
|
| 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. |
|