6.6 CSS padding

To give space to your inner content

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;}
Good night, good night! Parting is such sweet sorrow, that I shall say good night till it be morrow.

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

blockquote{ background: yellow; border: 1px solid blue; padding: 20px;}
Good night, good night! Parting is such sweet sorrow, that I shall say good night till it be morrow.

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

Back to top

MarkSheet Video tutorials are coming!

Sign up for the MarkSheet newsletter to get notified!

Close