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:

.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

.quotation  { 
    padding: 10px 5px 10px 5px;
} 

3 values = top – left & right – bottom

.quotation { 
    padding: 10px 5px 10px;
} 

2 values = top & bottom – left & right

.quotation { 
    padding: 10px 5px;
} 

1 value = top & bottom & left & right

.quotation { 
    padding: 10px;
}