Блочная модель документа / Стандартная блочная модель [7/23]
×

Стандартная блочная модель [7/23]

Стандартная блочная модель отвечает на основной вопрос:

Сколько же в итоге места будет занимать элемент?

Ответ следующий:

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

Для строчных элементов есть свои особенности, которые мы опишем позже.

Схема блочной модели:

Блочная модель

  • ширина/высота содержания — свойства width и height (синий прямоугольник на схеме);
  • внутренние отступы — свойство padding;
  • рамки — свойство border;
  • внешние отступы — свойство margin.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Стандартная блочная модель</title> <link rel="stylesheet" href="/assets/course9/style1.css"> </head> <body> <div class="block block1">Блок 1</div> <div class="block block2">Блок 2</div> <div class="block block3">Блок 3</div> </body> </html>
CSS
.block { width: 96px; height: 36px; margin: 20px; } .block2 { } .block3 { }
HTML Academy
  1. Задайте всем блокам ширину 196px.
  2. Задайте второму и третьему блоку внутренние отступы справа и слева 20px.
  3. Задайте третьему блоку ширину рамок 12px.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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