Padding

Padding adds a transparent area inside the border of an element. Without padding, text and images images will displayed on the edge of window/container.

Paddings add to the total width and height of an element.

Specific Paddings

Margins for each side can be set separately:

1
2
3
4
5
6
.quotation {
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
}

Padding Shorthand

The padding shorthand property can have different numbers of values.

4 values = top – right – bottom – left

1
2
3
.quotation  {
    padding: 10px 5px 10px 5px;
}

3 values = top – left & right – bottom

1
2
3
.quotation {
    padding: 10px 5px 10px;
}

2 values = top & bottom – left & right

1
2
3
.quotation {
    padding: 10px 5px;
}

1 value = top & bottom & left & right

1
2
3
.quotation {
    padding: 10px;
}