fix: add block-inline tags

docs/html-css/05-block-inline.md

@@ -0,0 +1,62 @@
+---
+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_**