Теория
Теория

«Выпадание» внешних отступов

«Выпадание» — это ещё один эффект, связанный с вертикальными внешними отступами.

Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмётся к верхнему краю родительского, а у родительского элемента появится отступ сверху. То есть верхний отступ внутреннего элемента «выпадает» из родительского элемента:

Выпадение внешних отступов

Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим».

Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху:

Исправление выпадения внешних отступов

Внешние и внутренние отступы всегда складываются.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>«Выпадание» внешних отступов</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block-1"> <div class="block-2">Блок 2</div> Блок 1 </div> </body> </html>

CSS

body { padding: 0 20px; } .block-1 { height: 100px; border: none; text-align: center; } .block-2 { margin-left: 20px; margin-right: 20px; text-align: center; }

ЗадачиВыполнено

Второму блоку задайте margin-top: 20px;.
Первому блоку задайте margin-top: 40px;,
затем ему же задайте border: 1px solid white;
и padding-top: 20px;.

Обратите внимание на отступ от края первого блока до второго блока. Он будет размером 40px (2 клеточки).

«Выпадание» внешних отступов

Вход

Регистрация

Восстановление доступа