62 lines
3.4 KiB
Markdown
62 lines
3.4 KiB
Markdown
---
|
||
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_** |