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

Learn CSS with my ebook

This ebook is a step by step guide in which I teach you how to build your own personal webpage from scratch, line by line, with HTML5, CSS3, and even JS.

CSS in 44 minutes book cover
Get it now
Close