6.6 CSS padding

The padding is the space between an element’s border and its content.

The amount of space can be defined using any of the size units.

blockquote{ padding: 20px;}

As for borders, the padding can be set individually for any of the 4 sides.

blockquote{ padding-bottom: 20px;}

Because the padding lies between the border and the content, it’s easier to visualize the inner space with a border applied:

blockquote{ background: yellow; border: 1px solid blue;}

Adding a padding will provide space between the textual content and the borders:

blockquote{ background: yellow; border: 1px solid blue; padding: 20px;}

Notice how the element’s background stretches until its borders. Applying padding allows to extend that background.