CSS | margin-top Property
The margin-top property in CSS is used to set the top margin of an element. It sets the margin-area on the top of the element. The default value of the margin-top property is 0.
Syntax:
margin-top: length|auto|initial|inherit;
Property values:
- length: It is used to specify the length of margin with a fixed value. This value can be positive, negative or zero.
Syntax:
margin-top: length;
Example:
html
<!DOCTYPE html><html> <head> <title>margin-top property</title> <!-- margin-top CSS property --> <style> p { margin-top:50px; background-color:green; } </style> </head> <body style = "background-color:lightgreen;"> <!-- margin-top property used here --> <p style = ""> This paragraph has 50px top margin . </p> </body></html> |
Output:
- percentage (%): It is used to specify the amount of margin as a percentage relative to the width of the containing element.
Syntax:
margin-top: %;
Example:
html
<!DOCTYPE html><html> <head> <title>margin-top property</title> <!-- margin-top CSS property --> <style> p { margin-top:5%; background-color:green; } </style> </head> <body style = "background-color:lightgreen;"> <!-- margin-top property used here --> <p style = ""> This paragraph has 5% top margin . </p> </body></html> |
Output:
- auto: This property is used when margin-top is determined by the browser.
Syntax:
margin-top: auto;
Example:
html
<!DOCTYPE html><html> <head> <title>margin-top property</title> <!-- margin-top CSS property --> <style> h3 { margin-top:auto; background-color:green; } </style> </head> <body style = "background-color:lightgreen;"> <!-- margin-top property used here --> <h3 style = ""> margin-top: auto; </h3> </body></html> |
Output:
- initial It is used to set margin-top property to its default value.
Syntax:
margin-top: initial;
Example:
html
<!DOCTYPE html><html> <head> <title>margin-top property</title> <!-- margin-top CSS property --> <style> h3 { margin-top:initial; background-color:green; } </style> </head> <body style = "background-color:lightgreen;"> <!-- margin-top property used here --> <h3 style = ""> margin-top: initial; </h3> </body></html> |
Output:
- inherit: It is used when margin-top property is inherited from its parent.
Syntax:
margin-top: inherit;
Example:
html
<!DOCTYPE html><html> <head> <title>margin-top property</title> <!-- margin-top CSS property --> <style> .gfg { margin-top:100px; } h3 { margin-top:inherit; background-color:green; } </style> </head> <body style = "background-color:lightgreen;"> <div class = "gfg"> <!-- margin-top property used here --> <h3 style = ""> margin-top: inherit; </h3> </div> </body></html> |
Output:
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 case of vertical (top and bottom) margins. It is called Margin Collapse.
Supported Browsers: The browser supported by margin-top property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 3.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Safari 1.0 and above
Please Login to comment...