Setting Padding
Padding is great to use for the needed white space around text/images inside another element.
Using paddings
Example: padding-left: 10px;
These paddings may be used:
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
padding Shortcuts
Using a shortcut is a great idea to save space in CSS and to save time. In order to use a shortcut you must first understand the order which they must be listed.
To have all padding the same
Example: padding: 10px; (Where 10px is the amount you wish to use)
To have the top and bottom, left and right the same
Example: padding: 20px 10px;
The first listing is top and bottom while the second listing is left and right.
To have top and bottom different while still having left and right the same
Example: padding: 20px 10px 30px;
First number is top, second is left and right, third is bottom.
To have all four different
Example: padding: 5px 10px 15px 20px;
First is top, second is right, third is bottom, last is left.