---
sidebar_position: 5
---

# Блочные и строчные элементы

В HTML все элементы делятся на **блочные (block-level)** и **строчные (inline)**. Разница между ними в том, как они ведут себя в потоке документа и как отображаются на странице.


## 📦 Блочные элементы
- **Занимают всю доступную ширину контейнера** (растягиваются от левого до правого края).
- **Начинаются с новой строки** — следующий элемент всегда будет ниже.
- Можно задавать размеры (`width`, `height`), отступы (`margin`, `padding`).
- Часто используются для построения структуры страницы.

**Примеры блочных тегов:**
```html
<div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <section>,
    <article>, <header>, <footer>, <form>, <table>
```

**Пример:**
```html
<p>Это абзац.</p>
<div>Это div.</div>
<p>А это снова абзац.</p>
```

👉 Каждый абзац и `div` начнутся с новой строки.

## ✏️ Строчные элементы
- **Занимают только необходимую ширину содержимого.**
- **Не переносят строку** — можно размещать несколько подряд в одной строке.
- Нельзя задавать `width` и `height` (они игнорируются), но можно управлять отступами (`padding`, `margin-left/right` работают, `margin-top/bottom` — нет).
- Обычно используются для выделения текста или вставки небольших элементов внутрь текста.

**Примеры строчных тегов:**
```html
<span>, <a>, <strong>, <em>, <b>, <i>, <u>, <img>, <label>, <code>
```
**Пример:**
```html
<p>Это <strong>важное</strong> слово и <a href="#">ссылка</a> в тексте.</p>
```
👉 Все элементы идут в одной строке.

⚖️ **Сравнение**

| Характеристика            | Блочные элементы      | Строчные элементы                 |
|---------------------------|-----------------------|-----------------------------------|
| Занимаемое место          | Всю ширину родителя   | Только по содержимому             |
| Начинается с новой строки | ✅ Да                  | ❌ Нет                             |
| Можно задать width/height | ✅ Да                  | ❌ Нет                             |
| Использование             | Структура, контейнеры | Выделение текста, мелкие элементы |

💡 **Важно:**
В CSS можно менять это поведение через свойство `display`. Например:
- `display: inline` → элемент становится строчным
- `display: block` → становится блочным
- `display: inline-block` → промежуточный вариант (как строчный, но с возможностью задавать размеры).

🚀 **_Источник: ChatGPT_**