From 1c8fafad0debf50c7f5f7d0549a51a250cb97dca Mon Sep 17 00:00:00 2001
From: RedrockJS <smb.sochi@gmail.com>
Date: Fri, 19 Sep 2025 09:41:19 +0300
Subject: [PATCH] fix: add block-inline tags

---
 docs/html-css/05-block-inline.md              | 62 +++++++++++++++++++
 .../{05-selectors.md => 06-selectors.md}      |  2 +-
 ...6-preprocessors.md => 07-preprocessors.md} |  2 +-
 .../{07-size-units.md => 08-size-units.md}    |  2 +-
 4 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 docs/html-css/05-block-inline.md
 rename docs/html-css/{05-selectors.md => 06-selectors.md} (99%)
 rename docs/html-css/{06-preprocessors.md => 07-preprocessors.md} (99%)
 rename docs/html-css/{07-size-units.md => 08-size-units.md} (99%)

diff --git a/docs/html-css/05-block-inline.md b/docs/html-css/05-block-inline.md
new file mode 100644
index 0000000..c699a4c
--- /dev/null
+++ b/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_**
\ No newline at end of file
diff --git a/docs/html-css/05-selectors.md b/docs/html-css/06-selectors.md
similarity index 99%
rename from docs/html-css/05-selectors.md
rename to docs/html-css/06-selectors.md
index 66ce0ac..fd3ec68 100644
--- a/docs/html-css/05-selectors.md
+++ b/docs/html-css/06-selectors.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Селекторы, специфичность
diff --git a/docs/html-css/06-preprocessors.md b/docs/html-css/07-preprocessors.md
similarity index 99%
rename from docs/html-css/06-preprocessors.md
rename to docs/html-css/07-preprocessors.md
index a0c525c..0b20732 100644
--- a/docs/html-css/06-preprocessors.md
+++ b/docs/html-css/07-preprocessors.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Препроцессоры
diff --git a/docs/html-css/07-size-units.md b/docs/html-css/08-size-units.md
similarity index 99%
rename from docs/html-css/07-size-units.md
rename to docs/html-css/08-size-units.md
index fdd6171..9d28f31 100644
--- a/docs/html-css/07-size-units.md
+++ b/docs/html-css/08-size-units.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # Единицы измерения в CSS