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

🔍 Введение: Почему это важно?

Вёрстка — это как конструктор LEGO. Чтобы собирать крутые проекты, нужно понимать, какие «кирпичики» (элементы) есть в HTML и как они работают. Сегодня разберём блочные и строчные элементы — это фундамент, без которого невозможно двигаться дальше!

🧱 Блочные элементы: Основные принципы

Блочные элементы (block) ведут себя как «кирпичи» — они всегда занимают всю доступную ширину и начинаются с новой строки.

🔹 Характеристики:

• Занимают 100% ширины родителя.
• Можно задавать отступы (margin, padding), высоту и ширину.
• Примеры: <div>, <p>, <h1>–<h6>, <ul>, <section>.

💻 Пример кода:

<div style="background: lightblue; padding: 10px;">
  Это блочный элемент — он растянулся на всю ширину!
</div>
<p style="border: 1px solid red;">А этот параграф — тоже блочный.</p>

Результат: Оба элемента отображаются друг под другом, даже если в коде они написаны в одну строку.

📏 Строчные элементы: Гибкость и нюансы

Строчные элементы (inline) — как слова в тексте. Они «обтекают» друг друга и занимают только нужное место.

🔹 Характеристики:

• Занимают столько места, сколько требуется содержимому.
• Нельзя задавать width, height, вертикальные margin.
• Примеры: <span>, <a>, <strong>, <em>, <img>.

💻 Пример кода:

<p>
  Это <span style="color: red;">строчный элемент</span>, 
  а вот <a href="#">ссылка</a> — тоже строчная.
</p>

Результат: Текст и ссылки идут в одну строку, если позволяет ширина экрана.

⚡ Ключевые отличия: Таблица-шпаргалка

🌟 Гибрид: inline-block — лучшее из двух миров?

Иногда нужно совместить свойства: элемент должен идти в строку, но иметь размеры. Для этого есть display: inline-block!

💻 Пример:

<div style="display: inline-block; width: 100px; background: coral;">
  Блок 1
</div>
<div style="display: inline-block; width: 100px; background: lightgreen;">
  Блок 2
</div>

Результат: Оба <div> стоят в одной строке, но имеют фиксированную ширину.

🛠️ Практика: Когда что использовать?

1. Блочные
   Для крупных структур (шапка, подвал, секции).
   Когда нужно управлять отступами и размерами.

2. Строчные
   Для текстовых элементов (выделение, ссылки).
   Для иконок или мелких интерактивных элементов.

3. inline-block
   Для кнопок, навигационных меню.
   Для элементов, которые должны идти в строку, но иметь отступы.

🚀 Вывод: Запомните главное!

• Блочные = «кирпичи», строчные = «слова».
• inline-block — гибрид для сложных случаев.
• Выбор типа элемента влияет на вёрстку сильнее, чем кажется!

Попробуйте поэкспериментировать с примерами выше — это лучший способ закрепить знания. Увидимся в следующем уроке! 🎉

P.S. Если хотите глубже разобрать тему, посмотрите разборы вёрстки от Данилы Бежина — там много практики и лайфхаков!