Знакомство с CSS / Свойства для задания размеров и отступов [5/15]
×

Свойства для задания размеров и отступов [5/15]

С помощью CSS можно задавать ширину, высоту, внешние и внутренние отступы элементов, минимальную и максимальную ширину и высоту и так далее.

Все свойства, которые так или иначе влияют на размеры и отступы элементов, описываются в так называемой «Блочной модели документа». Помимо свойств для отступов и размеров в блочную модель входят свойства для описания границ и очень важное свойство display, которое определяет тип элемента (блочный, строчный и другие).

В этом задании мы познакомимся с некоторыми свойствами из блочной модели, а более подробно и полно они будут рассмотрены в курсе «Блочная модель документа».


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойства для задания размеров и отступов</title> </head> <body> <h1>Блочные элементы и CSS</h1> <p class="p-first">Размеры и отступы с помощью CSS можно задавать блочным элементам. Абзац, тег &lt;p&gt;, является одним из них.</p> <p class="p-second">Блочным элементам можно задавать внутренние и внешние отступы.</p> <p class="p-third">Также им можно задавать ширину и высоту.</p> </body> </html>
CSS
p { margin: 16px 0 16px 0; background-color: #dff0d8; } .p-first { } .p-second { } .p-third { }
HTML Academy
  1. Добавьте в CSS-правило для класса p-first свойство margin-left: 50px;.
  2. В CSS-правило для класса p-second свойство padding: 20px;.
  3. В CSS-правило для класса p-third свойство width: 50%;.

Используемые свойства детально разобраны в курсе «Блочная модель документа».

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

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

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

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

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