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

sidebar_position

sidebar_position
5

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

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

📦 Блочные элементы

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

Примеры блочных тегов:

<div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <section>,
    <article>, <header>, <footer>, <form>, <table>

Пример:

<p>Это абзац.</p>
<div>Это div.</div>
<p>А это снова абзац.</p>

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

✏️ Строчные элементы

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

Примеры строчных тегов:

<span>, <a>, <strong>, <em>, <b>, <i>, <u>, <img>, <label>, <code>

Пример:

<p>Это <strong>важное</strong> слово и <a href="#">ссылка</a> в тексте.</p>

👉 Все элементы идут в одной строке.

⚖️ Сравнение

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

💡 Важно: В CSS можно менять это поведение через свойство display. Например:

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

🚀 Источник: ChatGPT