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; }
Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera