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

При добавлении стилей к блокам вы можете заметить, что одни стили взаимодействуют с другими. Например, правило border взаимодействует с padding — границы учитывают внутренний отступ и отодвигаются от контента внутри. Также свойство padding увеличивает ширину и высоту блока, как бы «растягивая его».

Данные особенности называются блочной моделью (box-model). По этой модели браузеры «рисуют» блок, наслаивая правила друг на друга.

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

Задание

Добавьте в редактор div с классом card-hello и установите следующие правила:

  • цвет фона #FA7268
  • цвет текста белый #FFFFFF
  • ширина блока: 230 пикселей
  • высота блока 25 пикселей
  • внутренние отступы 20 пикселей
  • внешние отступы 10 пикселей.
  • рамка шириной 2 пикселя, сплошная. Цвет #9C27B0
  • размер шрифта 20 пикселей

Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.