В чём разница между block-level и inline элементами? Примеры.

Question

Accepted Answer

## Практический смысл
**Block** занимает ширину контейнера (по умолчанию) и начинается с новой строки. **Inline** течёт в строке, ширина по содержимому; вертикальные margin/padding ведут себя иначе.

## Примеры
- Block: `div`, `p`, `section`, `h1`–`h6`, `ul`.
- Inline: `span`, `a`, `strong`, `em`, `img` (replaced — особый случай).

```css
a.button { display: inline-block; /* компромисс */ }
```

`display` может изменить поведение: `span { display: block }`. Есть ещё `inline-block`, flex items и т.д. — HTML-категория «flow content» шире, чем просто block/inline.

## Итог
Block — блоки документа; inline — фраза в тексте. На практике смотрите computed `display`, а не только имя тега.