CSS Margins Properties
If you want to display space around HTML elements or text, then you can use margin properties. Note that, the margin properties always work outside the any borders or HTML tags.
You can define the margins for the each sides of an element such as the top, bottom, right, and left sides using the CSS margin properties like:
- margin-top
- margin-bottom
- margin-right
- margin-left
Here are given below the values of the each margin properties:
- auto – the browser deliberate the margin value to apply
- % – we define a margin in % of the width of the containing element
- length – we define margin value in px, pt, cm, etc.
- inherit – specifies that the margin always inherited from the parent element
Let’s see the given example to understand how margin properties works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
margin-top: 110px;
margin-bottom: 150px;
margin-right: 120px;
margin-left: 90px;
}
</style>
</head>
<body>
<p class="bor-test">Here we use margin properties margin-top,margin-bottom,margin-left and margin-right in this paragraph.</p>
</body>
</html>
Output
Here we use margin properties margin-top,margin-bottom,margin-left and margin-right in this paragraph.
Note: You can define negative values in margine properties.
Margin – Shorthand Property
In margin shorthand property, you can combine all the margin properties in single property or single rule.
You can see here how it works:
If the CSS margin property has 4 values:
margin: 23px 45px 85px 110px;
- top margin is 23px
- right margin is 45px
- bottom margin is 85px
- left margin is 110px
Let’s see the given example to understand how margin shorthand property works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
margin: 23px 45px 85px 110px;
}
</style>
</head>
<body>
<p class="bor-test">Here we use margin shorthand property in this paragraph.</p>
</body>
</html>
Output
Here we use margin shorthand property in this paragraph.