As you may already know, the margin property stands for the margin between an (X)HTML element and all the other elements surrounding the said element. The margin property can be designated for the top, right, left, and bottom of a targeted element.

margin-top: length percentage or auto;
margin-left: length percentage or auto;
margin-right: length percentage or auto;
margin-bottom: length percentage or auto;

You may have observed in the given example that there are three values for the margin property: length, percentage, and auto.

It is also possible to declare all an element’s margin under a single property:
margin: 10px 10px 10px 10px;
You could also choose to declare all four of the enumerated values above. Just make sure you arrange them according to the proper order, which is as follows:
1. top
2. right
3. bottom
4. left

If only one value is declared, the said value will apply on all sides:
margin: 10px;
In cases when two or three values were declared, the undeclared value will use the opposite side’s value:
margin: 10px 10px; /* 2 values */
margin: 10px 10px 10px; /* 3 values */

It is also possible to affix negative margin property values. Meanwhile, the margin is set to zero if no margin value was set:
margin: -10px;

Some elements, including paragraphs, are given default margins by some browsers. To address this, simply set the margin to zero (0):
p {margin: 0;}

Take note that it is not necessary to add px (pixels) or any other unit if the set value is 0.
In the example below, this site’s elements are 20px fro m the body.
body{
margin: 20px;
background: #eeeeee;
font-size: small;
font-family: Tahoma, Arial, “Trebuchet MS”, Helvetica, sans-serif;
text-align: left;
}

Text Color
Use the following guide when setting a rule for text color:
color: value;
The values could come in the form of color name (ie red, black), hexadecimal number (ie #ff0000, #000000), or an RGB color code (ie rgb(255, 0, 0), rgb(0, 0, 0)).

Letter Spacing
To manage letter spacing in CSS, set the value to 0 so that the text will not be justified. You could also apply negative values in the following rule:
letter-spacing: value;

Values could either be normal or length.

Text Align
Use this rule to align text on your web pages:
text-align: value;
Left, right, center, and justify are the possible values.

Text Decoration
The following rule is used to decorate website text:
text-decoration: value;

Possible values include none, underline, overline, line through, and blink.

Text Indent
Use the following rule to indent the first line of text within an (X)HTML element:
text-indent: value;

The values could either be length and percentage, among others.

Text Transform
Use text transform to manipulate the size of letters in an (X)HTML element:
text-transform: value;

The possible values are none, capitalize, none, lowercase, and uppercase.

White Space
Manage the whitespace of an (X)HTML element by using the following rule:
white-space: value;
You could choose from the normal, pre, and nowrap values.

Word Spacing
Apply the following rule to control the space between words on your document. You could also use negative values:
word-spacing: value;
Possible values include normal and length.

Tags: Margin Property