CSS Margin

CSS Margin

Margin clears an area around the border that separates it from other boxes.

CSS Margin Properties
The CSS margin properties allow you to set the margins around the sides of an element’s box. The margins does not have a background-color, it is completely transparent.
Setting Margins for Individual Sides
You can easily specify the different margins for the different sides of an element such as top, right, bottom or left side using the CSS individual margin property.
Example
h1 {
margin-bottom: 20px;
}
p {
margin-left: 10px;
margin-right: 30px;
}
The margin Shorthand Property
The margin property is a shorthand property to avoid setting margin of each side separately: margin-top, margin-right, margin-bottom and margin-left.
Example
h1 {
margin: 0 10px;
}
p {
margin: 25px 50px 75px 100px;
}
This shorthand notation can take one, two, three, or four whitespace separated values.
• If one value is set, this is applied to all the four sides.
• If two values are specified, the first value is applied to the top and bottom, and the second value is applied to the right and left side.
• If three values are specified, the first value is applied to the top, second value is applied to left and right side and the last value is applied to the bottom.
• If four values are specified, they are applied to the top, right, bottom and the left side respectively in the specified order.