CSS Margin
What is a CSS Margin?
CSS margins are used to create space around elements, outside of their border. Margins push elements away from each other and from the edges of their container, helping you control the layout and spacing of your web page.
For example, in the figure below, the element has a margin of 20 pixels on all four sides.
Basic Properties for CSS Margin:
1. margin
The margin property is a shorthand for setting the margin on all four sides of an element: top, right, bottom, and left. You can specify margins using different units, such as pixels (px), ems (em), percentages (%), and others.
Example:
Output:
In this example:
• div{border: 2px solid black;}: This rule applies to all <div> elements, adding a 2-pixel solid black border around them.
• .box{margin: 20px;}: Adds a 20-pixel margin on all four sides (top, right, bottom, and left) of any element with the box class. This rule only affects elements within the class box.
2. margin-top
This property sets the margin space above an element.
Example:
<head>
<style>
div{
border: 2px solid black;
}
.box {
margin-top: 20px;
}
</style>
</head>
<body>
<div>div with no margin</div>
<div class=”box”>Content with 20px margin only on top side</div>
<div>div with no margin</div>
</body>
Output:
In this example:
• div{border: 2px solid black;}: This rule applies to all <div> elements, giving them a 2-pixel solid black border.
• .box{margin-top: 20px;}: Adds a 20-pixel margin to the top of elements with the box class. This rule only affects elements within the class box.
3. margin-right
This property sets the margin space to the right of an element.
Example:
<head>
<style>
div{
border: 2px solid black;
}
.box {
margin-right: 20px;
}
</style>
</head>
<body>
<div>div with no margin</div>
<div class=”box”>Content with 20px margin only on right side</div>
<div>div with no margin</div>
</body>
Output:
In this example:
• div{border: 2px solid black;}: This rule applies to all <div> elements, giving them a 2-pixel solid black border.
• .box{margin-right: 20px;}: Adds a 20-pixel margin to the right side of elements with the box class. This rule only affects elements within the class box.
4. margin-bottom
This property sets the margin space below an element.
Example:
<head>
<style>
div{
border: 2px solid black;
}
.box {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>div with no margin</div>
<div class=”box”>Content with 20px margin only on bottom side</div>
<div>div with no margin</div>
</body>
Output:
In this example:
• div{border: 2px solid black;}: This rule applies to all <div> elements, giving them a 2-pixel solid black border.
• .boxmargin-bottom: 20px;}: Adds a 20-pixel margin to the bottom of the elements with the box class. This rule only affects elements within the class box.
5. margin-left
This property sets the margin space to the left of an element.
Example:
<head>
<style>
div{
border: 2px solid black;
}
.box {
margin-left: 20px;
}
</style>
</head>
<body>
<div>div with no margin</div>
<div class=”box”>Content with 20px margin only on left side</div>
<div>div with no margin</div>
</body>
Output:
In this example:
• div{ border: 2px solid black;: }: This rule applies to all <div> elements, giving them a 2-pixel solid black border.
• .box{margin-left: 20px;}: Adds a 20-pixel margin to the left side of the elements with the box class. This rule only affects elements within the class box.
Using Multiple Values
You can set different margins for each side using the margin shorthand property with multiple values:
1. One Value
One Value applies to all four sides.
<head>
<style>
div{
border: 2px solid black;
}
.box {
margin: 20px;
}
</style>
</head>
<body>
<div>div with no margin</div>
<div class=”box”>Content with 20px margin on all sides</div>
<div>div with no margin</div>
</body>
Output:
In this example:
• div{ border: 2px solid black;: }: This rule applies to all <div> elements, adding a 2-pixel solid black border around them.
• .box{ margin: 20px;: } Adds a 20-pixel margin on all four sides (top, right, bottom, and left) of any element with the box class. This rule only affects elements within the class box.
2. Two Values
The first value applies to the top and bottom, the second to the left and right.
Example:
<head>
<style>
div{
border: 2px solid black;
}
.box {
margin: 20px 30px;
}
</style>
</head>
<body>
<div>div with no margin</div>
<div class=”box”>Content with 20px margin on top and bottom side and 30px margin on right and left</div>
<div>div with no margin</div>
</body>
Output:
In this example:
.box{ margin: 20px 30px;}:
• 20px: Applies a 20-pixel margin to the top and bottom of the element.
• 30px: Applies a 30-pixel margin to the right and left of the element.
• This rule only affects elements within the box class.
3. Three Values
The first value applies to the top, the second to the left and right, and the third to the bottom.
Example:
<head>
<style>
div{
border: 2px solid black;
}
.box {
margin: 10px 20px 30px;
}
</style>
</head>
<body>
<div>div with no margin</div>
<div class=”box”>Content with 10px margin on top, 20px margin on right and left, and 30px margin on bottom</div>
<div>div with no margin</div>
</body>
Output:
In this example:
.box {margin: 10px 20px 30px;}:
• 10px: Applies a 10-pixel margin to the top of the element.
• 20px: Applies a 20-pixel margin to the right and left sides of the element.
• 30px: Applies a 30-pixel margin to the bottom of the element.
• This rule only affects elements within the box class.
4. Four Values
Each value applies to a specific side in the order: top, right, bottom, left.
Example:
<head>
<style>
div{
border: 2px solid black;
}
.box {
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>div with no margin</div>
<div class=”box”>Content with 10px margin on top, 20px margin on right, 30px margin on bottom, and 40px margin on left</div>
<div>div with no margin</div>
</body>
Output:
In this example:
.box{margin: 10px 20px 30px 40px;)}:
• 10px: Sets a 10-pixel margin on the top.
• 20px: Sets a 20-pixel margin on the right.
• 30px: Sets a 30-pixel margin on the bottom.
• 40px: Sets a 40-pixel margin on the left.
• This rule applies only to elements with the box class.
Auto Margin
The auto value can be used to automatically adjust the margins, often used for centering elements horizontally.
Example:
<head>
<style>
div{
border: 2px solid black;
}
.box {
width: 50%;
margin: 0 auto;
}
</style>
</head>
<body>
<div>div with no margin</div>
<div class=”box”>Content with 0 margin on top and bottom, auto margin to the left and right</div>
<div>div with no margin</div>
</body>
Output:
In this example:
1. width: 50%;: Sets the width of the element with the class box to 50% of its containing element’s width. This makes the box element take up half of the width of its parent container.
2. margin: 0 auto;:
• 0: Sets the top and bottom margins to 0, meaning there will be no vertical spacing outside the element.
• auto: Applies automatic margins to the left and right. This is a common technique used to center block-level elements horizontally within their containing element.
Conclusion
CSS margins are essential for controlling the spacing and layout of elements on your web page. By adjusting margins, you can create space between elements and control their position within their containers, leading to a cleaner and more organized design.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Basic Margin
Objective: Add a basic margin to a div element.
Expected Output: A div element with space around it.
Output:
Scenario 2: Margin for Specific Sides
Objective: Apply margins to specific sides of an element.
Expected Output: A div element with different margins on each side.
Output:
Scenario 3: Auto Margin for Centering
Objective: Center a block-level element horizontally using auto margins.
Expected Output: A centered div element within its container.
Output:
Scenario 4: Negative Margin
Objective: Use a negative margin to overlap elements.
Expected Output: Two overlapping div elements with negative margins.
<!DOCTYPE html>
<html>
<head>
<style>
.negative-margin-1 {
margin: 20px;
border: 1px solid black;
padding: 10px;
}
.negative-margin-2 {
margin-top: -20px;
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class=”negative-margin-1″>
<p>First div with negative margin.</p>
</div>
<div class=”negative-margin-2″>
<p>Second div with negative margin.</p>
</div>
</body>
</html>
Output:
Scenario 5: Margin Shorthand
Objective: Use shorthand notation to set all four margins in one line.
Expected Output: A div element with margins set using shorthand notation.
Output:
Scenario 6: Margin Collapse
Objective: Demonstrate margin collapse between two adjacent block-level elements.
Expected Output: Two adjacent div elements with collapsing margins.
<!DOCTYPE html>
<html>
<head>
<style>
.margin-collapse-1 {
margin-bottom: 20px;
border: 1px solid black;
}
.margin-collapse-2 {
margin-top: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class=”margin-collapse-1″>
<p>First div with margin.</p>
</div>
<div class=”margin-collapse-2″>
<p>Second div with margin.</p>
</div>
</body>
</html>
Output:
