Basic Padding

The padding property creates space inside the border of an element, between the content and the border. It can be set using pixels, percentages, etc.

Individual Padding Sides

You can set padding individually on each side with padding-top, padding-right, padding-bottom, and padding-left.

Padding Shorthand

CSS allows you to set padding for all four sides in one line with shorthand. The values are applied in the order: top, right, bottom, left.

padding: 10px 20px 30px 40px;

This sets 10px for top, 20px for right, 30px for bottom, and 40px for left.

Percentage-based Padding

Padding can also be set in percentages, which are based on the width of the parent element. For example, padding: 5% would apply 5% padding relative to the parent’s width.