| layout | post |
|---|---|
| title | CSS <strong>padding</strong> |
| subtitle | To give <strong>space</strong> to your inner content |
| section | css |
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.
{% highlight css %} blockquote{ padding: 20px;} {% endhighlight %}
As for borders, the padding can be set individually for any of the 4 sides.
{% highlight css %} blockquote{ padding-bottom: 20px;} {% endhighlight %}
Because the padding lies between the border and the content, it's easier to visualize the inner space with a border applied:
{% highlight css %} blockquote{ background: yellow; border: 1px solid blue;} {% endhighlight %}
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:
{% highlight css %} blockquote{ background: yellow; border: 1px solid blue; padding: 20px;} {% endhighlight %}
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.