margin-top

p.test { margin-top: 50px;}
p.test1 { margin-top: 0;}
p.test2 { margin-top: -50px;}

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	Treated as if '0' were specified.

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

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

※ Version data is based on MDN.

Specifies the top margin (outer spacing).

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 the top margin is also based on the width, not the height, of the containing block.

<div style="border: solid 1px #f00; width: 300px;">
	<div style="margin-top: 10%; border: solid 1px #00f; background-color: #ff0;">This is a div element. 'margin-top: 10%' is specified. The containing block's width is '300px', so the top margin of this element is '30px'.</div>
</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-bottom: 100px;">This is a div element. 'margin-bottom: 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-top: 50px;">This is a div element. 'margin-top: 50px' 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-bottom: 100px;">This is a div element with 'float: left'. 'margin-bottom: 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-top: 50px;">This is a div element with 'float: left'. 'margin-top: 50px' 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-top: 100px;">
	<div style="border: dashed 1px #000; width: 300px; height: 200px; margin-top: 150px;"></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-top: 100px;">
	<div style="background-color: rgba(255, 255, 0, 0.5); width: 300px; height: 200px; margin-top: 50px;"></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-top: auto;">This is a div element. 'margin-top: auto' is specified. When 'auto' is specified for vertical margins, it is treated as '0', so no spacing is generated.</div>

Inline-level elements (with 'display' set to 'inline') only support left and right margins; vertical margins have no effect.

<p style="border: solid 1px #f00;">
	<span style="background-color: #ff0; margin-top: 50px;">This is a span element. 'margin-top: 50px' is specified, but vertical margins have no effect on inline-level elements.</span>
</p>

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