margin

p.test { margin: 10px;}
p.test1 { margin: 10px 15px;}
p.test2 { margin: 10px 15px 20px;}
p.test3 { margin: 10px 15px 20px 25px;}
p.test4 { margin: 0 auto;}
p.test5 { margin: -50px auto 0;}

Value	Description
number	A numeric value. Commonly used units are 'px' and '%'. Negative values are also allowed. When specified as '%', the reference size is the width of the containing block. The initial value is '0'.
auto	Applies a value calculated from the opposite margin, an equal value, or '0'. For vertical margins, 'auto' is treated as '0'. For horizontal margins, when one side is 'auto', the remaining space after the other margin is applied. When both sides are 'auto', equal values are calculated and the element is centered horizontally.

<div style="border: solid 1px #f00;">
	<p style="margin: 10px; border: solid 1px #00f; background-color: #ff0;">This is a p element. 'margin: 10px' is specified.</p>
</div>

<div style="border: solid 1px #f00;">
	<p style="margin: 10px 15px; border: solid 1px #00f; background-color: #ff0;">This is a p element. 'margin: 10px 15px' is specified.</p>
</div>

<div style="border: solid 1px #f00;">
	<p style="margin: 10px 15px 20px; border: solid 1px #00f; background-color: #ff0;">This is a p element. 'margin: 10px 15px 20px' is specified.</p>
</div>

<div style="border: solid 1px #f00;">
	<p style="margin: 10px 15px 20px 25px; border: solid 1px #00f; background-color: #ff0;">This is a p element. 'margin: 10px 15px 20px 25px' is specified.</p>
</div>

<div style="border: solid 1px #f00;">
	<p style="margin: 0 auto; width: 200px; border: solid 1px #00f; background-color: #ff0;">This is a p element. 'margin: 0 auto' and 'width: 200px' are specified.</p>
</div>

※ Version data is based on MDN.

Specifies the top, bottom, left, and right margins (outer spacing) all at once.

A margin is the spacing outside the border. See the box model diagram below.

When a numeric value is specified as '%', it is a relative value based on the width of the containing block. Note that vertical margins are also based on the width, not the height, of the containing block.

<div style="border: solid 1px #f00; width: 300px; margin: 0 auto;">
	<p style="margin: 10%; border: solid 1px #00f; background-color: #ff0;">This is a p element. 'margin: 10%' is specified. The containing block's width is '300px', so the margin on all four sides is '30px'.</p>
</div>

Negative values can be specified for margin.

<div style="border: solid 1px #f00; width: 300px; height: 200px; margin: 0 auto;">This is a div element. 'margin: 0 auto' is specified.</div>
<div style="background-color: rgba(255, 255, 0, 0.5); width: 300px; height: 200px; margin: -50px auto 0;">This is a div element. 'margin: -50px auto 0' is specified. Because the top margin is set to '-50px', this element overlaps the element above it.</div>

Except in certain cases, vertical margins collapse — only the larger of the two facing margins is applied. Horizontal margins do not collapse.

<div style="border: solid 1px #f00; width: 300px; height: 200px; margin: 0 auto 100px;">This is a div element. 'margin: 0 auto 100px' is specified. The bottom spacing is 100px due to margin collapse, not 150px.</div>
<div style="border: solid 1px #f00; width: 300px; height: 200px; margin: 50px auto 0;">This is a div element. 'margin: 50px auto 0' is specified. The top spacing is 100px due to margin collapse, not 150px.</div>

Margin collapse does not occur in the following cases:

• When the 'position' property is set to 'absolute' or 'fixed'.
• When the 'float' property is set to 'left' or 'right'.
• When the 'overflow' property is set to 'hidden' or 'scroll'.

<div style="border: solid 1px #f00; float: left; width: 300px; height: 200px; margin: 0 0 100px;">This is a div element with 'float: left'. 'margin: 0 0 100px' is specified. Because the element is floated, margin collapse does not occur, so the bottom spacing is 150px.</div>
<div style="border: solid 1px #f00; float: left; width: 300px; height: 200px; margin: 50px 0 0;">This is a div element with 'float: left'. 'margin: 50px 0 0' is specified. Because the element is floated, margin collapse does not occur, so the top spacing is 150px.</div>

Note that margin collapse (bleed-through) can also occur in parent-child element relationships in the vertical direction, where the child's margin passes through the parent's margin.

<div style="background-color: #ff0; width: 300px; height: 300px; margin: 100px 0 0;">
	<div style="border: dashed 1px #000; width: 300px; height: 200px; margin: 150px 0 0;"></div>
</div>

Margin collapse (bleed-through) in parent-child elements does not occur in the following cases:

• When the 'position' property is set to 'absolute' or 'fixed'.
• When the 'float' property is set to 'left' or 'right'.
• When the 'overflow' property is set to 'hidden' or 'scroll'.
• When the parent's 'padding' property (in the same direction as the margin) is a value other than '0'.
• When the parent's 'border-width' property (in the same direction as the margin) is a value other than '0'.

<div style="border: dashed 1px #000; width: 300px; height: 200px; margin: 100px 0 0;">
	<div style="background-color: rgba(255, 255, 0, 0.5); width: 300px; height: 200px; margin: 50px 0 0;"></div>
</div>

When 'auto' is specified for vertical margins, it is treated as if '0' were specified, so no spacing is generated.

<div style="border: solid 1px #f00; margin: auto 0;">This is a div element. 'margin: auto 0' is specified. When 'auto' is specified for vertical margins, it is treated as '0', so no spacing is generated.</div>

When both left and right margins are set to 'auto', equal margin values are calculated automatically and the element is centered horizontally. Note that when centering a block-level element, a width must be specified with the 'width' property. Without a specified width, a block-level element defaults to 100% width, leaving no room for margins.

<div style="border: solid 1px #f00;">
	<p style="margin: 0 auto; width: 200px; border: solid 1px #00f; background-color: #ff0;">This is a p element. 'margin: 0 auto' and 'width: 200px' are specified. Equal left/right margins are applied, centering the element horizontally.</p>
</div>

When only one horizontal margin is set to 'auto', the remaining space after the other margin's value is calculated and applied.

<div style="border: solid 1px #f00; width: 500px;">
	<p style="margin: 0 auto 0 50px; width: 200px; background-color: #ff0;">This is a p element. 'margin: 0 auto 0 50px' and 'width: 200px' are specified. The containing block (parent element) is '500px'. With 'margin-left: 50px' and 'width: 200px', the right margin is automatically calculated to be '250px'.</p>
</div>

Inline-level elements (with 'display' set to 'inline') only support left and right margins; vertical margins have no effect. Also, setting horizontal margins to 'auto' on inline elements does not center them.

<p style="border: solid 1px #f00;">
	<span style="background-color: #ff0; margin: 50px;">This is a span element. 'margin: 50px' is specified, but vertical margins have no effect on inline-level elements. Only the left/right margins of '50px' are applied.</span>
</p>
<p style="border: solid 1px #f00;">
	<span style="background-color: #ff0; margin: 0 auto;">This is a span element. 'margin: 0 auto' is specified, but inline-level elements are not centered horizontally.</span>
</p>

※ The 'margin' property is also explained in detail here.