Блочная модель CSS (box model): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этом тренажере вы сможете попрактиковаться в работе с блочной моделью CSS. Вы будете работать с такими свойствами, как margin, padding, border, width, height и box-sizing. Каждое задание направлено на закрепление знаний и навыков работы с блочной моделью. Вы будете дополнять готовый CSS-код, чтобы достичь нужного визуального результата.

Список тем

Добавление отступов

Добавьте отступы для элемента с классом 'box', чтобы он отображался с отступом 20px сверху и снизу, и 10px слева и справа. Используйте свойство padding.

CSS

.box {
  input1: 20px 10px;
  background-color: #f0f0f0;
}

                     .box {
  input1: 20px 10px;
  background-color: #f0f0f0;
}

HTML

<div class="box">Это элемент с отступами</div>

Используйте свойство padding для добавления отступов внутри элемента. Например, padding: 20px 10px; задаст отступы сверху и снизу 20px, а слева и справа — 10px.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление границы

Добавьте границу для элемента с классом 'border-box'. Граница должна быть сплошной, толщиной 2px и черного цвета. Используйте свойство border.

CSS

.border-box {
  input1: 2px solid black;
  padding: 10px;
}

                     .border-box {
  input1: 2px solid black;
  padding: 10px;
}

HTML

<div class="border-box">Это элемент с границей</div>

Используйте свойство border для добавления границы. Например, border: 2px solid black; задаст сплошную черную границу толщиной 2px.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение модели box-sizing

Измените модель box-sizing для элемента с классом 'content-box', чтобы ширина и высота включали padding и border. Используйте свойство box-sizing.

CSS

.content-box {
  input1
  width: 200px;
  padding: 10px;
  border: 2px solid black;
}

                     .content-box {
  input1
  width: 200px;
  padding: 10px;
  border: 2px solid black;
}

HTML

<div class="content-box">Это элемент с измененной моделью box-sizing</div>

Используйте свойство box-sizing со значением border-box, чтобы ширина и высота элемента включали padding и border.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление внешних отступов

Добавьте внешние отступы для элемента с классом 'margin-box', чтобы он отображался с отступом 30px сверху и 15px слева и справа. Используйте свойство margin.

CSS

.margin-box {
  input1: 30px 15px;
  background-color: #e0e0e0;
}

                     .margin-box {
  input1: 30px 15px;
  background-color: #e0e0e0;
}

HTML

<div class="margin-box">Это элемент с внешними отступами</div>

Используйте свойство margin для добавления внешних отступов. Например, margin: 30px 15px; задаст отступ сверху 30px и слева/справа 15px.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Работа с шириной и высотой

Установите ширину и высоту для элемента с классом 'size-box'. Ширина должна быть 250px, а высота — 150px. Используйте свойства width и height.

CSS

.size-box {
  input1: 250px;
  input2: 150px;
  background-color: #d0d0d0;
}

                     .size-box {
  input1: 250px;
  input2: 150px;
  background-color: #d0d0d0;
}

HTML

<div class="size-box">Это элемент с заданной шириной и высотой</div>

Используйте свойства width и height для задания ширины и высоты элемента. Например, width: 250px; height: 150px;.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинированное задание

Создайте элемент с классом 'combined-box', который имеет внутренние отступы 20px, внешние отступы 10px, границу 3px dashed blue и ширину 300px. Используйте свойства padding, margin, border и width.

CSS

.combined-box {
  input1: 20px;
  input2: 10px;
  input3: 3px dashed blue;
  input4: 300px;
}

                     .combined-box {
  input1: 20px;
  input2: 10px;
  input3: 3px dashed blue;
  input4: 300px;
}

HTML

<div class="combined-box">Это комбинированный элемент</div>

Используйте свойства padding, margin, border и width для создания элемента с заданными параметрами.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку