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

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

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

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

Задание

Добавьте в редактор div с классом card-hello и установите следующие правила:
* цвет фона #FA7268
* цвет текста белый #FFFFFF
* ширина блока: 230 пикселей
* высота блока 25 пикселей
* внутренние отступы 20 пикселей
* внешние отступы 10 пикселей
* рамка шириной 2 пикселя, сплошная. Цвет #9C27B0
* размер шрифта 20 пикселей

Стили запишите в теге style.


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