Using & understanding margins in CSS
In CSS a margin is used to create space between a particular element and the elements that surround it. Margins are useful for positioning elements and spacing out the content of a website.
There are a couple of different options available when specifying the margin of an element, lets take a look at these.
Set the margin for all sides of an element:
margin:10px;
Set the margin for a specific side of an element:
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
Shorthand version:
margin: 10px 10px 10px 10px;
If you prefer to use the shorthand version remember that it works in clockwise order, starting at the top. So, it goes, TOP, RIGHT, BOTTOM, LEFT.
If you're having trouble understanding the difference between margins and padding consider reading the following paragraph
Remember that a margin is used to create space between the element on which it is defined and the elements that surround it. Padding on the other hand, is used to create space between the border of an element and the content which it contains.
Anyway, I don't want to talk any more about padding - I'll add a new tutorial covering that in the near future.
Popular pages