Свойство padding задаёт внутренние отступы блока — отступы от внешней границы блока до его содержимого. Эти отступы ещё иногда называют «полями».

Внутренние отступы для разных сторон задаются с помощью свойств padding-top, padding-right, padding-bottom и padding-left:

Существует также сокращённое свойство padding, в котором можно задать внутренние отступы сразу для всех сторон:

padding: 10px;
padding: 5px 10px;
padding: 5px 10px 15px;
padding: 5px 10px 15px 20px;

1. Одинаковые отступы со всех сторон.

2. Отступы сверху и снизу 5px, справа и слева 10px.

3. Отступ сверху 5px, слева и справа 10px, снизу 15px.

4. Разные отступы со всех сторон, в порядке верхний, правый, нижний, левый.

Для строчных боксов лучше не задавать вертикальных отступов, так как они ведут себя непредсказуемо.

В задании внутренние отступы блоков сделаны прозрачными.