Padding adds a space around an element, that even pushes the border away:
This is an example of padding
This is an example of normal text
You can add padding in the following ways:
Padding on all sides
This adds padding on top, bottom, right and left.A padding on all sides of 3 units
<div class="pad-Number between 1 to 10">Example of padding on all sides</div>
Example
<div class="pad-3">Example of padding on all sides</div>
Padding on top
This adds padding on top only. A padding on top of 3 units<div class="pad-top-Number between 1 to 10">Example of padding on top only</div>
Example:
<div class="pad-top-3">Example of padding on top only</div>
Padding on bottom
This adds padding on bottom only. A padding on bottom of 3 units<div class="pad-bottom-Number between 1 to 10">Example of padding on bottom only</div>
Example:
<div class="pad-bottom-3">Example of padding on bottom only</div>
Padding on right
This adds padding on right only. A padding on right of 3 units<div class="pad-right-Number between 1 to 10">Example of padding on right only</div>
Example:
<div class="pad-right-3">Example of padding on right only</div>
Padding on left
This adds padding on left only. A padding on left of 3 units<div class="pad-left-Number between 1 to 10">Example of padding on left only</div>
Example:
<div class="pad-left-3">Example of padding on left only</div>
Padding on right and left (x)
This adds padding on right and left or on x axis. A padding on right and left of 3 units<div class="pad-x-Number between 1 to 10">Example of padding on right and left</div>
Example:
<div class="pad-x-3">Example of padding on right and left</div>
Padding on top and bottom (y)
This adds padding on top and bottom or on y axis. A padding on top and bottom of 3 units<div class="pad-y-Number between 1 to 10">Example of padding on top and bottom</div>
Example:
<div class="pad-y-3>">Example of padding on top and bottom</div>