margin

The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.
Negative values are also allowed.

Values

Accepts one, two, three or four values of the following:
<length>
Specifies a fixed width. Negative Values are allowed.
<percentage>
A <percentage> relative to the width of the containing block. Negative values are allowed.
auto
auto is replaced by some suitable value, e.g. it can be used for centering of blocks.
div { width:50%; margin:0 auto; } centers the div container horizontally.

Example

<!DOCTYPE html>
<html>
    <head>
        <style>
            .margin1 {
            /* all sides 5% margin */
                margin: 5%;
            } .margin2 {
            /* all sides 10px margin */
                margin: 10px;
            } .margin3 {
            /* top and bottom 1.6em, left and right 20px margin */
                margin: 1.6em 20px;
            } .margin4 {
            /* top 10px, left and right 3%, bottom 1em margin */
                margin: 10px 3% 1em;
            } .margin5 {
            /* top 10px, right 3px, bottom 30px, left 5px margin */
                margin: 10px 3px 30px 5px;
            } .margin6 {
            /* 1em margin on top and bottom, box is horizontally centered */
                margin: 1em auto;
            } .margin7 {
            /* box is horizontally centered, 0 margin on top and bottom */
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="margin1">
            The quick brown red fox jumps over the lazy dog
        </div>
        <div class="margin2">
            The quick brown red fox jumps over the lazy dog
        </div>
        <div class="margin3">
            The quick brown red fox jumps over the lazy dog
        </div>
        <div class="margin4">
            The quick brown red fox jumps over the lazy dog
        </div>
        <div class="margin5">
            The quick brown red fox jumps over the lazy dog
        </div>
        <div class="margin6">
            The quick brown red fox jumps over the lazy dog
        </div>
        <div class="margin7">
            The quick brown red fox jumps over the lazy dog
        </div>
    </body>
</html>