3.3 Margin
The margin property can be used to define the distance from all four sides of an element to a neighbouring element, including to the edges of a document itself. There are five properties available:
| Property | Description |
|---|---|
| margin-top | Defines the margin to the top of an element |
| margin-right | Defines the margin to the right of an element |
| margin-bottom | Defines the margin to the bottom of an element |
| margin-left | Defines the margin to the left of an element |
| margin | Compiles the above properties into one declaration |
For example:
body {margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;}
This would set the margins for the body of a HTML document. And this can be compiled using the border property, the list order yet again being being: top, right, bottom and then left:
body {margin: 100px 40px 10px 70px;}
Margins can be set for most elements. For example:
body {margin: 50px 40px 10px 60px;} h1 {margin: 10px 15px 5px 25px;} p {margin: 5px 15px 5px 15px;}
This would set margins for the body, h1 and p tags.