The margin-bottom property in CSS is used to add space below an element. It helps maintain proper spacing between elements in a webpage layout.
- It specifies the bottom margin area of an element.
- The margin can be set using length values or percentages.
- The default value of the margin-bottom property is 0.
Syntax:
margin-bottom: <length> | <percentage> | autoProperty values:
- Length: This value specifies the length of the margin with a fixed value. This value can be positive, negative or zero.
Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS margin-bottom</title>
<!--Driver Code Ends-->
<style>
div{
background-color: lightgreen;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<!-- margin-bottom for below div
is set to 50px -->
<div style="margin-bottom: 50px">Line One</div>
<!-- margin-bottom for below div
is set to 0px -->
<div style="margin-bottom: 0px">Line Two</div>
<div>Line Three</div>
</body>
</html>
<!--Driver Code Ends-->
- Percentage: This value specifies the amount of margin as a percentage relative to the width of the containing element.
Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS margin-bottom</title>
<!--Driver Code Ends-->
<style>
h1 {
color: green;
}
.larger {
width: 300px;
background-color: white;
}
.smaller {
width: 100px;
background-color: white;
}
div{
background-color: lightgreen;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- margin-bottom is set to 10% with width of
containing box set to 300px -->
<div class="larger">
<div style="margin-bottom: 10%";>Line One</div>
<div>Line Two</div>
</div>
<!-- margin-bottom is set to 10% with width of
containing box set to 100px -->
<div class="smaller">
<div style="margin-bottom: 10%;">Line One</div>
<div>Line Two</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
- auto: If the value of this property is set as "auto" then the browser automatically calculates a suitable value for the margin size.