CSS margins are used to create space outside an element’s border, helping to separate it from other elements on a webpage. They help in organizing the layout and preventing content from appearing too close together.
margin controls the outer spacing around elements.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
margin: 20px;
background-color: lightblue;
border: 2px solid navy;
padding: 10px;
}
</style>
</head>
<body>
<div style="border: 1px dashed red;">
<div class="box">
I have a 20px margin separating me from the red dashed container!
</div>
</div>
</body>
</html>
In this example:
margin: 20px; applies a 20px margin to all four sides of the element.Syntax:
body {
margin: value;
}
em, rem, vh, and vw can also be used for relative sizing.Note: We can also use negative values for margins to pull elements closer together or overlap them.
CSS margin properties control the space outside an element, with margin serving as a shorthand for all sides.
| Margin Property | Description | Example |
|---|---|---|
margin-top |
Sets the top margin of an element. | margin-top: 20px; |
margin-right |
Sets the right margin of an element. | margin-right: 15px; |
margin-bottom |
Specifies the margin at the bottom of an element. | margin-bottom: 30px; |
margin-left |
Determines the width of the margin on the left side. | margin-left: 10px; |
margin |
Shorthand to set margins on all four sides. | margin: 10px 20px; |
The margin property can take 1 to 4 values to quickly set the spacing for different sides.
If the margin property contains four values, it applies them in the order of Top, Right, Bottom, Left (clockwise).
margin: 40px 100px 120px 80px;
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px 100px 120px 80px;
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
<body>
<div style="border: 1px dashed black;">
<p>This paragraph has different margins for all four sides.</p>
</div>
</body>
</html>
If the margin property contains three values, the first value sets the top, the second sets both left and right, and the third sets the bottom margin.
margin: 40px 100px 120px;
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px 100px 120px;
background-color: lightblue;
border: 1px solid black;
}
</style>
</head>
<body>
<div style="border: 1px dashed black;">
<p>Top is 40px, Left/Right are 100px, Bottom is 120px.</p>
</div>
</body>
</html>
If the margin property contains two values, the first value applies to the top and bottom margins, and the second value applies to the right and left margins.
margin: 40px 100px;
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px 100px;
background-color: lightpink;
border: 1px solid black;
}
</style>
</head>
<body>
<div style="border: 1px dashed black;">
<p>Top/Bottom are 40px, Left/Right are 100px.</p>
</div>
</body>
</html>
If the margin property has one value, it applies to all four sides equally.
margin: 40px;
margin: auto; PropertyYou can use margin: auto; to horizontally center a block-level element within its container. The browser calculates and splits the remaining horizontal space evenly between the left and right margins.
<!DOCTYPE html>
<html>
<head>
<style>
div.center-box {
margin: auto;
width: 50%;
border: 2px solid navy;
background-color: lightgray;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="center-box">
I am horizontally centered using margin: auto!
</div>
</body>
</html>
In this example:
margin: auto; automatically adjusts the left and right margins to center the element horizontally.width (like 50%) for margin: auto; to work effectively.margin: inherit; PropertyThe inherit value allows an element to copy the margin values of its direct parent.
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
margin: 30px;
border: 2px solid red;
}
.child {
margin: inherit;
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<div class="parent">
This is the parent with a 30px margin.
<div class="child">
This child inherits the 30px margin from its parent.
</div>
</div>
</body>
</html>
In this example:
margin: inherit; ensures the child element's margin matches the parent's 30px margin exactly.If a CSS rule is set to margin: 10px 20px;, what does it apply to?