Padding

The text of our cards touches their borders. That's what padding is for: the space between the content and the border, like the mat between a picture and its frame.

padding: 20px;

This declaration adds 20 pixels of padding on all four sides. Each side can also be set on its own:

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

Padding is part of the element's box, so the element's background fills it too. That's why padding is often used to make a colored area larger around its text.