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.
- 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 margin-top is determined by the browser.
- initial: It is used to set margin-top property to its default value.
- inherit: It is used when margin-top property is inherited from its parent.
Example: In this example, we are using margin-top: length; property.
html
<!DOCTYPE html>
<html>
<head>
<title>margin-top property</title>
<style>
p {
margin-top: 50px;
background-color: green;
}
</style>
</head>
<body style="background-color:lightgreen;">
<p style="">
This paragraph has 50px top margin .
</p>
</body>
</html>
|
Output:
Example: In this example, we are using margin-top: %; property.
html
<!DOCTYPE html>
<html>
<head>
<title>margin-top property</title>
<style>
p {
margin-top: 5%;
background-color: green;
}
</style>
</head>
<body style="background-color:lightgreen;">
<p style="">
This paragraph has 5% top margin .
</p>
</body>
</html>
|
Output:
Example: In this example, we are using margin-top: auto; property.
html
<!DOCTYPE html>
<html>
<head>
<title>margin-top property</title>
<style>
h3 {
margin-top: auto;
background-color: green;
}
</style>
</head>
<body style="background-color:lightgreen;">
<h3 style="">
margin-top: auto;
</h3>
</body>
</html>
|
Output:
Example: In this example, we are using margin-top: initial; property.
html
<!DOCTYPE html>
<html>
<head>
<title>margin-top property</title>
<style>
h3 {
margin-top: initial;
background-color: green;
}
</style>
</head>
<body style="background-color:lightgreen;">
<h3 style="">
margin-top: initial;
</h3>
</body>
</html>
|
Output:
Example: In this example, we are using margin-top: inherit; property.
html
<!DOCTYPE html>
<html>
<head>
<title>margin-top property</title>
<style>
.gfg {
margin-top: 100px;
}
h3 {
margin-top: inherit;
background-color: green;
}
</style>
</head>
<body style="background-color:lightgreen;">
<div class="gfg">
<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 the 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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!