Padding is the space between the border of a box and any content contained within it
Adding padding helps to increase readability of a box’s content
.thing {
/* padding can be applied to individual
sides of a box using padding-top, padding-bottom,
padding-left or padding-right */
/* style below applies 20px to left side of box */
padding-left: 20px;
}
.other-thing {
/* style below applies 10px to all four sides of box */
padding: 10px;
}
.gizmo {
/* when 4 values are provided, then values
are applied in a clockwork manner:
padding: [top] [right] [bottom] [left]; */
/* style below applies 4px to top, 10px to right,
6px to bottom & 10px to left */
padding: 4px 10px 6px 10px;
}
.other-gizmo {
/* when 2 values are represented as follows
padding: [top & bottom], [left, right]; */
/* style below applies 4px to top & bottom and 10px to right
& left */
padding: 4px 10px;
}