Чем отличаются `inline`, `block` и `inline-block`?

Question

Accepted Answer

## Модель отображения

| | block | inline | inline-block |
|---|---|---|---|
| Ширина | тянется на строку | по контенту | по контенту |
| height/width | да | игнор (кроме replaced) | да |
| Перенос | с новой строки | в потоке текста | в потоке, как слово |
| margin vertical | да | частично не влияет на line box | да |

```css
.badge { display: inline-block; padding: 4px 8px; }
```

## Практика

`inline` — фразы в тексте; `block` — секции; `inline-block` — «кирпичики» в строке с паддингами (часто заменён flex/grid).

	block	inline	inline-block
Ширина	тянется на строку	по контенту	по контенту
height/width	да	игнор (кроме replaced)	да
Перенос	с новой строки	в потоке текста	в потоке, как слово
margin vertical	да	частично не влияет на line box	да