The CSS Margin attribute is employed to specify the area surrounding elements. It is fully transparent and does not possess any background color. It creates an empty space around the element.
Margins on all four sides - top, bottom, left, and right - can be adjusted individually through distinct properties. Alternatively, you have the option to modify all margins simultaneously by employing the shorthand margin property.
There are following CSS margin properties:
CSS Margin Properties
| Property | Description |
|---|---|
| margin | This property is used to set all the properties in one declaration. |
| margin-left | it is used to set left margin of an element. |
| margin-right | It is used to set right margin of an element. |
| margin-top | It is used to set top margin of an element. |
| margin-bottom | It is used to set bottom margin of an element. |
CSS Margin Values
Here are several potential options for the margin attribute:
| Value | Description |
|---|---|
auto |
This is used to let the browser calculate a margin. |
| length | It is used to specify a margin pt, px, cm, etc. its default value is 0px. |
% |
It is used to define a margin in percent of the width of containing element. |
| inherit | It is used to inherit margin from parent element. |
Note: You can also use negative values to overlap content.
CSS margin Example
You have the option to specify varying margins for individual sides of an element.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
Output:
This content is not shown with the designated indentation.
This content is shown with a designated margin.
Margin: Shorthand Property
Using CSS shorthand property helps in reducing the code length by specifying all margin properties within a single property declaration.
There are four types to specify the margin property. You can use one of them.
- margin: 50px 100px 150px 200px;
- margin: 50px 100px 150px;
- margin: 50px 100px;
- margin 50px;
1) margin: 50px 100px 150px 200px;
It identifies that:
top margin value is 50px
right margin value is 100px
bottom margin value is 150px
left margin value is 200px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
Output:
This section does not appear with the designated margin.
This content is presented with a designated margin.
2) margin: 50px 100px 150px;
It identifies that:
top margin value is 50px
left and right margin values are 100px
bottom margin value is 150px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px 150px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
Output:
This content is not exhibiting the designated margin.
This text is presented with a designated margin.
3) margin: 50px 100px;
It identifies that:
top and bottom margin values are 50px
left and right margin values are 100px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
Output:
This paragraph does not appear with the designated margin.
This text is presented with a designated margin.
4) margin: 50px;
It identifies that:
top right bottom and left margin values are 50px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
Output:
This paragraph is not being shown with the designated margin.
This passage is presented with a designated margin.