To specify the space around an HTML element, the CSS Margin property is used. It adds a transparent space without any background color and thus clears an area around an element. Separate properties can be used to modify the top, bottom, left, and right margins. The shorthand margin property can be used to modify all the properties at once.
CSS Margin Properties:
| Property | Uses |
| margin | Used to define all the properties in one declaration. |
| margin-left | Used to define the left margin of an element. |
| margin-right | Used to define the right margin of an element. |
| margin-top | Used to define the top margin of an element. |
| margin-bottom | Used to define the bottom margin of an element. |
CSS Margin Values:
The possible values for margin property are listed below. The negative values can be used to overlap content.
| Value | Uses |
| auto | It used to allow a browser to calculate a margin. |
| length | Used to define a margin in pt, px, cm, etc. |
| Used to specify a margin in percent of the width of the element. | |
| inherit | Used to inherit the margin from the parent element. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid red;
margin-top: 40px;
margin-bottom: 30px;
margin-right: 20px;
margin-left: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we are defining the margin of individual sides.
Margin: Shorthand Property:
To shorten the code, we can define all the margin properties in one property, the CSS shorthand property is used. We can specify the margin property in either of the four ways.
- margin: 100px 200px 300px 400px;
- margin: 100px 200px 300px;
- margin: 100px 200px;
- margin 100px;
margin: 100px 90px 80px 70px;
It specifies that:
top margin value is 100px
right margin value is 90px
bottom margin value is 80px
left margin value is 70px
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid brown;
margin: 100px 90px 80px 70px;
background-color: pink;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we are using the first way of the margin shorthand property for defining all the margin properties in one property,
margin: 100px 90px 80px;
It specifies that:
top margin value is 100px
left and right margin value is 90px
bottom margin value is 80px
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid brown;
margin: 100px 90px 80px;
background-color: pink;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we are using the second way of the margin shorthand property for defining all the margin properties in one property,
margin: 100px 90px;
It specifies that:
top and bottom margin value is 100px
left and right margin value is 90px
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid brown;
margin: 100px 90px;
background-color: pink;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we are using the third way of the margin shorthand property for defining all the margin properties in one property,
margin: 100px;
It specifies that:
top, bottom, left, and right margin value is 100px.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid brown;
margin: 100px;
background-color: pink;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we are using the fourth way of the margin shorthand property for defining all the margin properties in one property,