Ответ
В HTML элементы делятся на **блочные (block)** и **строчные (inline)**:
1. **Блочные** (`
`, ``-`
`, `
`-``, ``):
* Занимают всю доступную ширину
* Начинаются с новой строки
* Могут содержать другие блочные и строчные элементы
* Поддерживают все CSS свойства (margin, padding, width, height)
2. **Строчные** (``, ``, ``, `![]()
`):
* Занимают только необходимую ширину
* Располагаются в строке друг за другом
* Не могут содержать блочные элементы (кроме `` в HTML5)
* Вертикальные margin/padding не влияют на поток
```
Блочный элемент (займет всю ширину)
Строчный элементРядом в строке
```
Также есть **inline-block** (`display: inline-block`) - гибрид: элементы в строке, но поддерживают width/height.
Блочный элемент (займет всю ширину)
Строчный элементРядом в строке
```
Также есть **inline-block** (`display: inline-block`) - гибрид: элементы в строке, но поддерживают width/height. Ответ 18+ 🔞
А, ну это же классика, про которую каждый второй фронтендер вроде как знает, а на деле нихуя не понимает, пока не наступит на грабли! Смотри, есть два главных типа элементов, как два сорта мудаков в очереди.
Первые — **блочные**. Это как тот дядька в автобусе, который раскинулся на всё сиденье. `
`, `` — они сука занимают ВСЮ доступную ширину, с новой строки начинаются, и могут внутрь себя запихнуть кого угодно — и других таких же растяп, и мелких строчных засранцев. Им можно все CSS-свойства впихнуть — margin, padding, ширину-высоту задай, хоть в пикселях, хоть в попугаях.
Вторые — **строчные**. Это как мелкие пассажиры, которые юлят в проходе. ``, ``, ``. Они занимают ровно столько места, сколько им надо по содержанию, и лепятся в одну строку друг к дружке. Но вот хуйня — внутрь себя блочного соседа они принять не могут (ну, кроме `` в современном HTML, он стал всеядный, ёпта). И если ты им попробуешь вертикальные отступы навесить — нихуя не сработает, они же в строчке, их только по горизонтали раздвинуть.
```html
`, все эти заголовки `