Margins, borders and padding
The 'CSS box model' is a concept which allows the designer to space elements on
the display, using borders where required.
The model implies that the content of an element will have padding around it before
apply a border. The border is then surrounded by a margin before being placed next
to other objects.
Margins are set with the margin-top, margin-right, margin-bottom, margin-left properties.
There is a shorthand form 'margin' too which can set all four to the same value,
or allow you to specify individual values in the order top, right, bottom, left.
Missing values are replaced by their opposite number. E.g.
h1 { margin-top: 1em; }
h2 { margin: 0.5em; }
h3 { margin: 0.5em 0.25em; }
Likewise padding values are set with the padding-top, padding-right, padding-bottom,
padding-left and padding properties.
h1 { padding-top: 1em; }
h2 { padding: 0.5em; }
h3 { padding: 0.5em 0.25em; }
Borders are set slightly differently as they need to specify colour and border style
as well as width. Widths are set using border-top-width, border-left-width, border-bottom-width,
border-right-width or border-width, with actual values, or relative values thin,
medium or thick. The border-color property sets the colour and the border-style
property can take the values none, dotted, dashed, solid, double, groove, ridge,
inset or outset. From 1 to 4 values can be specified allowing the border to be different
on each of the four sides. E.g.
h1, h2, h3 { border: 1px solid black; }