The CSS margin property is used to specify space around an element. The margin doesn't have any color. It is completely transparent. There are four properties for setting the margin for each side of an HTML element (top, right, bottom, and left).
| Property | Description |
|---|---|
| margin | This property is used to set all the properties in one declaration. |
| margin-left | It is used to set the left margin of an element. |
| margin-right | It is used to set the right margin of an element. |
| margin-top | It is used to set the top margin of an element. |
| margin-bottom | It is used to set the bottom margin of an element. |
These are some possible values for margin property.
| Value | Description |
|---|---|
| auto | This is used to let the browser auto calculate a margin. |
| length | It is used to specify a margin pt, px, cm, etc. The 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. |
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 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>
To minimize the code, it is possible in CSS to specify all the margin properties in one property.
The margin property is a shorthand property for the following individual margin properties:
So, here is how it works:
If the margin property has four values:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin: 50px 100px 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>
If the margin property has two values:
<div class="w3-example">
<h3>Margin Example</h3>
<div class="w3-code htmlHigh notranslate w3-responsive">
<pre>
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin: 50px 100px 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>
</pre>
</div>
<p><a href="#" class="w3-btn w3-green" target="_blank">Run it yourself</a></p>
</div>
If the margin property has one value:
margin: 100px;
all four margins are 100px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: Lightgreen;
}
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>
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:400px;
margin: auto;
border: 1px solid green;
}
</style>
</head>
<body>
<h2>Use of margin:auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>
<div>
This div will be horizontally centered because it has margin: auto;
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid green;
margin-left: 70px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>
</body>
</html>