Setting Margins
Margins are great to use for the needed white space around text/images or other elements of a page. They are a great addition to any design.
Using Margins
Example: margin-left: 10px;
These margins may be used:
- margin-top:
- margin-right:
- margin-bottom:
- margin-left:
Margin 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 margins the same
Example: margin: 10px; (Where 10px is the amount you wish to use)
To have the top and bottom, left and right the same
Example: margin: 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: margin: 20px 10px 30px;
First number is top, second is left and right, third is bottom.
To have all four different
Example: margin: 5px 10px 15px 20px;
First is top, second is right, third is bottom, last is left.