CSS Margin
The CSS margin property is used to create space around an element. CSS provides individual properties to set the margin for each side of an element (top, right, bottom, and left).
The individual sides
With the help of the following properties you can set the margin for each side of an element:
It’s already obvious that for the top we use margin-top, for the bottom margin-bottom, for the left side margin-left, and for the right margin-right.
All margin properties accept the following values:
auto- the margin is calculated by the browser,length- specifies a margin inpx,pt,cm, etc.,%- specifies a margin as a percentage of the width of the containing element,inherit- specifies that the margin must be inherited from its parent element.
The margin property accepts negative values.
Margin as a shorthand property
The CSS margin property is a shorthand property for the individual margin properties below:
When the margin property has four different values, it looks like this in code:
CSS different margins
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}If all sides have the same values, for example, all sides are 50px, in CSS we can write it like this.
CSS the same margin, code
p {
margin: 50px;
}When the top and bottom sides have the same value (for example, 15px) and the left and right sides have the same value (for instance, 10px), you can use the following code.
CSS margin with 2 numbers, code
p {
margin: 15px 10px;
}This is equivalent to:
CSS margin with 2 numbers, long way, code
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}When the left and right sides are the same (for example, 15px), the top side is 5px, and the bottom side is 10px, you can write:
CSS margin with 3 numbers, code
p {
margin: 5px 15px 10px;
}This is equivalent to:
CSS margin with 3 numbers, long way, code
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Example of the margin property:
CSS margin property code
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Result
The auto value of the margin property
You can horizontally center an element inside its container by setting the margin property to auto. As a result, the element will take up its defined width, and the remaining space will be divided equally between the right and left margins.
Example of the margin property with the "auto" value:
Example of using the “auto” value of the margin property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
</p>
<div>
The auto value horizontally centered this div.
</div>
</body>
</html>The inherit value of the margin property
In the example below, the left margin of the <p> element is inherited from its parent element (<div>):
Example of the margin property with the "inherit" value:
Example of using the “inherit” value of the margin property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
</p>
</div>
</body>
</html>Practice
What properties can you set with CSS Margin?