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.
