Решение: Верхний отступ h1 смещает div в HTML и CSS

Быстрый ответ

Чтобы избежать смещения внешнего div вниз из-за отступа у внутреннего div, воспользуйтесь свойством overflow: hidden для внешнего div:

<div style="overflow: hidden;">
  <div style="margin-top: 20px;">Содержимое внутри</div>
</div>

Глубокое погружение

Понимание принципа схлопывания отступов

Margin-top может вызвать непонимание, так как его использование приводит к отправке не только к внутреннему элементу, но и смещает вниз внешний элемент. Это происходит из-за так называемого "схлопывания отступов" – феномена, характерного для CSS.

Подробнее об этом расскажет наш спикер на видео

Использование поля padding вместо отступа сверху

Вместо margin-top рассмотрите возможность использования padding для создания необходимого пространства вокруг вашего h1 внутри div. Это поможет предотвратить смещение внешнего блока:

<div>
  <h1 style="padding-top: 20px;">Заголовок</h1>
</div>

Преобразование в строчный элемент

Путем изменения свойства display у h1 на inline-block вы избежите влияния его отступов на внешний div:

<div>
  <h1 style="display: inline-block; margin-top: 20px;">Заголовок</h1>
</div>

Управление свойством overflow: становление невидимым

Изменение свойства overflow у родительского блока позволяет более эффективно контролировать внутренние отступы:

<div style="overflow: auto;">
  <h1 style="margin-top: 20px;">Заголовок</h1>
</div>

Варианты с позиционированием

Относительное позиционирование является элегантной альтернативой для корректировки расположения элементов:

<div>
  <h1 style="position: relative; top: 20px;">Заголовок</h1>
</div>

Все достоинства Flexbox

Flexbox также предоставляет возможность гармоничного решения проблемы с отступами:

<div style="display: flex; align-items: flex-start;">
  <h1 style="margin-top: 20px;">Заголовок</h1>
</div>

Создание отступа при помощи псевдоэлементов

Использование псевдоэлемента :before позволяет имитировать отступ, что помогает избежать проблемы:

<style>
.parent:before {
  content: '';
  display: block;
  height: 20px; /* Например, желаемый размер отступа */
}
</style>
<div class="parent">
  <h1>Заголовок</h1>
</div>

Влияние отступов и их исключения

Существуют элементы, устойчивые к схлопыванию отступов:

• Плавающие элементы, которые не поддаются схлопыванию.
• Абсолютно позиционированные элементы, устоящие перед этим эффектом.
• Блоки с изменяемым свойством overflow, которые избегают схлопывания отступов.
• Строчные блочные элементы, не подверженные схлопыванию отступов.

Учитывая это, можно эффективно используемый определённые свойства для корректировки отступов.

Специфика корневого элемента

Отступ у корневого элемента не схлопывается с отступами его потомков, что позволяет более точно управлять дизайном.

Псевдоэлементы: стилизация без лишней разметки

Псевдоэлементы позволяют держать HTML-код чистым и легко читаемым, так как они обходят себя введением дополнительных элементов и сохраняют семантическую структуру.

Визуализация

Представьте аккордеон (🪗), где секции отражают отступы и div'ы:

Исходное состояние:  [🟥][🟨]
🟥 = Внешний Div (аккордеон)
🟨 = Внутренний Div (мех аккордеона с отступом сверху)

Когда к внутреннему div применён margin-top (то есть к меху аккордеона):

Эффект отступа:   [🟥]
                   ---🟨   <-- Будто аккордеон раскрывается

Внешний Div выглядит так, как будто сместился вниз:

Конечное представление:   [🟥]
                         {пространство}
                         [🟨]

Аккордеон весьма наглядно демонстрирует поведение margin-top внутреннего div.

Полезные материалы

1. Введение в базовую CSS-модель блока – CSS | MDN
2. Что нужно знать о схлопывании отступов | CSS-Tricks
3. CSS Layout – свойство position
4. margin – CSS | MDN
5. Свежие вопросы по теме 'margin' – Stack Overflow
6. Контекст форматирования блока – CSS | MDN
7. css – Отступ дочернего элемента перемещает родительский элемент – Stack Overflow