Исправляем перекрытие отступов у div в CSS: float и margin

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

Чтобы одолеть проблему наложения отступов, следует взглянуть на такое явление, как слияние отступов. Эффективные решения представляют собой использование flexbox, добавление padding или применение границы:

Пример с применением flexbox:

<div style="display: flex; flex-direction: column;">
  <div>Div 1 // Непоколебимый оловянный солдатик</div>
  <div>Div 2 // Тропа за первопроходцем</div>
</div>

Вариант с добавлением padding:

<div style="padding: 1px 0;">
  <div style="margin-bottom: 20px;">Div 1 // Лёгкость понедельниковой безысходности</div>
  <div style="margin-top: 20px;">Div 2 // Непреклонность и упорство</div>
</div>

Возможный подход через добавление границы:

<div style="border: 1px solid transparent;">
  <div>Div 1 // Интроверт на вечеринке</div>
  <div>Div 2 // Оберегает личное пространство</div>
</div>

Таким образом, отступы держатся в узде. 🏋️‍♀️

Алхимия слияния отступов

Слияние отступов — сложное и порой волшебное явление в CSS, когда вертикальные отступы соседних элементов сливаются в один более просторный. Несмотря на пользу, это может ломать дизайн.

Трюк clearfix

clearfix — наша волшебная палочка, спаситель для элементов, ставших невидимыми из-за обтекания:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
  // И вуаля! Ненужные отступы испарились
}

Как капля соуса в бургер:

<div class="clearfix">
  <div style="float: left;">Div 1 // Левый фланг, свобода для индивида?</div>
  <div style="float: left;">Div 2 // Следует за толпой</div>
</div>

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

Иммунитет Flexbox и Grid к слиянию отступов

Flexbox и Grid не подвержены проблеме слияния отступов — они поистине супергерои CSS-мира.

Пример с Grid, игнорирующим слияние отступов:

<div style="display: grid; grid-template-columns: 1fr;">
  <div>Item 1 // Занял своё мячище</div>
  <div>Item 2 // Занят своими делами</div>
</div>

Захват пространства

Сочетайте подходы, ориентируясь на гибкость. Всегда будьте в готовности:

Пространство между

Почему доверять только отступам? Padding и grid-gap — надёжные помощники в создании промежутков.

Внутренний подход

Недостатки внутренних отступов — неприятная вещь, но решаемы: – Padding обычно решает подобные проблемы. – Невидимая граница может стать незаметной защитой от слияния отступов.

BFC ко взывает вас

Блочный форматирующий контекст (BFC) — ваша магическая пуля для борьбы со слиянием. Создавайте новый BFC и спасайте макет с помощью overflow: hidden или display: flow-root в родительском div.

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

Обработка отступов — поединок сумоистов, забывших о личном пространстве:

До слияния отступов:
🤼‍♂️<--📏-->🤼‍♂️  (Каждому сумоисту 🤼‍♂️ достаётся уровень пространства 📏)

После слияния отступов:
🤼‍♂️🤼‍♂️  (Сумоисты тесно прижимаются друг к другу)

На помощь приходят display: inline-block или граница:

🤼‍♂️<🎽>--📏--<🎽>🤼‍♂️
(Каждый сумоист 🤼‍♂️ теперь в рубашке 🎽)

Идеальные отступы! 🎉

Изучение отладки

Инспектируйте, тестируйте и проверяйте применённые решения. Ваши тузы в рукаве:

Плавное исполнение

Сценарии применения отступов бывают различными: вложенные блоки, соседние элементы с противоположными отступами, элементы с обтеканием. Будьте готовы ко всему!

Кнопка "Пусть мне повезет"

Иногда стоит довериться интуиции (и коду) и нажать кнопку "Пусть мне повезет" в инструментах разработчика.

Проверка кросс-браузерной поддержки

Браузеры трактуют CSS-правила по-разному. Всегда проверяйте ваше решение в различных браузерах; то, что работает в одном, может не сработать в другом.

Применение продвинутых техник

Продвинутые свойства CSS также способны оказать помощь:

• display: flow-root; создает BFC
• visibility: collapse; стильно скрывает строки и колонки таблицы

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

1. Введение в основы CSS модели блочной коробки — прочный гид по основам вёрстки в web.
2. Что нужно знать о слиянии отступов — понимание механики слияния отступов.
3. CSS модель блока — базовый набор для погружения в основы CSS модели блока.
4. Как отключить слияние отступов? — советы и трюки от сообщества разработчиков.
5. Блочный форматирующий контекст — подробности о том, как работает блочный форматирующий контекст в CSS.