Внутренний отступ

Текст в наших карточках упирается в их рамки. Для этого и нужен внутренний отступ (padding): пространство между содержимым и рамкой, как паспарту между картиной и рамкой.

padding: 20px;

Это объявление добавляет внутренний отступ в 20 пикселей со всех четырёх сторон. Каждую сторону можно задать и отдельно:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

Внутренний отступ — часть блока элемента, поэтому фон элемента заливает и его. Вот почему padding часто используют, чтобы увеличить цветную область вокруг текста.