Блочная модель документа / «Выпадание» внешних отступов [10/23]
×

«Выпадание» внешних отступов [10/23]

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

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

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

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


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>«Выпадание» внешних отступов</title> <link rel="stylesheet" href="/assets/course9/style1.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; }
HTML Academy
  1. Второму блоку задайте margin-top: 20px;.
  2. Первому блоку задайте margin-top: 40px;,
  3. затем ему же задайте border: 1px solid white;
  4. и padding-top: 20px;.

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

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.