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

«Схлопывание» внешних отступов [9/23]

Во второй части курса разберем некоторые важные тонкости блочной модели. И начнем с внешних отступов (или маргинов).

Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен 20px, а второго 40px, то отступ между ними будет 40px.

Этот эффект называется эффектом «схлопывания» внешних отступов или «схлопывания» маргинов.

Горизонтальные отступы между элементами просто складываются. Например, горизонтальный отступ между двумя элементами с отступами 30px будет равен 60px.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>«Схлопывание» внешних отступов</title> <link rel="stylesheet" href="/assets/course9/style1.css"> </head> <body> <div class="block block-1">Блок 1</div> <div class="block block-2">Блок 2</div> </body> </html>
CSS
body { padding: 20px; } .block { height: 96px; line-height: 96px; text-align: center; } .block-1 { } .block-2 { }
HTML Academy

Задайте внешние отступы для блоков:

  1. первому блоку задайте нижний отступ размером 20px;
  2. второму блоку задайте верхний отступ размером 40px.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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