CSS margin-top Property

The margin-top property in CSS is used to add space above an element. It helps control the layout and spacing between elements on a webpage.

• It sets the top margin area of an element.
• The default value of margin-top is 0.
• It can be defined using values like px, %, em, or auto.

Syntax:

margin-top: length | auto | initial | inherit;

Property values:

• length: It is used to specify the length of the margin with a fixed value. This value can be positive, negative, or zero. 
• percentage (%): It is used to specify the amount of margin as a percentage relative to the width of the containing element.
• auto: This property is used when the browser determines margin-top.  
• initial: It is used to set the margin-top property to its default value. 
• inherit: It is used when the margin-top property is inherited from its parent. 

Example: Here, we use margin-top: length; property.

Example: Here, we are using margin-top: %; property.

Example: Here, we are using margin-top: auto; property.

Example: Here, we are using margin-top: initial; property.

Example: Here, we are using margin-top: inherit; property.

Note: Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on horizontal (left and right) margins but only in the case of vertical (top and bottom) margins. It is called Margin Collapse.