The CSS margin property is used for creating space around the element. CSS provides different properties, with the help of which you can set the margin for an element’s each side (right, left, top and bottom).
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 bottom margin-bottom, for left side margin-left and right margin-right.
All the margin properties can have the values below:
- auto - the margin is calculated by the browser,
- length, which is used for specifying a margin in px, pt, cm, etc,
- %, which specifies a margin in % of the width of the containing element,
- inherit , which 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:
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.
p {
margin: 50px;
}When we have the same values for the top and the bottom sides (for example 15px) and the same for the left and the right sides (for instance 10px), then we can the follow code.
p {
margin: 15px 10px;
}This is the same as this one.
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}When the values for the left and the right sides are the same, for example, 15px, the top side is a 5px, and the bottom side is 10px, we will write the following code.
p {
margin: 5px 15px 10px;
}This is the same as this one.
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Example of the margin property:
<!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
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.
Example of the margin property with the "auto" value:
<!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:
<!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 Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.