Home >>CSS Tutorial >CSS Margin property
CSS Margin property
CSS Margin
CSS Margin property is are used to create space around the element. Using the separated properties you can setting the margin for each side of an element (top, bottom, left and right). It is completely transparent. You have a full control over the margin by using CSS. Using the shorthand margin property you can also change all properties of margin at once.
CSS Margin Properties
These are the following CSS margin properties:
| Property | Description |
|---|---|
| Margin | By using this property you can set all the properties in one declaration. |
| margin-left | By using this property you can set space around the left margin of an element. |
| margin-right | By using this property you can set right margin of an element. |
| margin-top | By using this property you can set top margin of an element. |
| margin-bottom | By using this property you can set bottom margin of an element. |
CSS Margin Values
These are the following values for margin property.
| Value | Description |
|---|---|
| Auto | In this property the margin is depend on the calculation of browser. |
| length | It is used to define a margin cm, pt, px, etc. default value is 0px. |
| % | It specifies a margin in percent of the width of containing element. |
| inherit | It is used to specifies that the margin should be inherit from parent element. |
Note: In case if you want to overlap content you can also use negative values.
Let's take an example of CSS margin:
<!DOCTYPE html>
<html>
<head>
<style>
h4.demo {
background:pink;
}
h4.demo1 {
margin-top: 45px;
margin-bottom: 55px;
margin-right: 80px;
margin-left: 80px;
background:dodgerblue;
}
</style>
</head>
<body>
<h4 class="demo">This paragraph is displayed without specified margin </h4>
<h4 class="demo1">This paragraph is displayed with specified margin.</h4>
</body>
</html>
This paragraph is displayed without specified margin.
This paragraph is displayed with specified margin.
Margin: Shorthand Property
CSS shorthand property is used to shorten the code. You can set all margin properties at once.
- margin-top
- margin-right
- margin-bottom
- margin-left
There are four values to define the margin property. You can use one of them as per your needs.
1. margin: 50px 100px 150px 200px
- top margin is 50px
- right margin is 100px
- bottom margin is 150px
- left margin is 200px
Let's take an example of shorthand property with four values:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: : 50px 100px 150px 200px;
background-color: #dc9fed;
}
</style>
</head>
<body>
<h2>shorthand property with four values</h2>
<div>This div element has four values: top margin of 50px, a right margin of 100px, a bottom margin of 150px, and a left margin of 200px.</div>
</body>
</html>
shorthand property with four values
2. margin: 50px 100px 150px
- top margin is 50px
- right and left margin are 100px
- bottom margin is 150px
Let's take an example of shorthand property with three values:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 50px 100px 150px;
background-color: #dc9fed;
}
</style>
</head>
<body>
<h2>margin shorthand property with three values</h2>
<div>This div element has three values: top margin of 50px, a right and left margin of 100px, and a bottom margin of 150px.</div>
</body>
</html>
margin shorthand property with three values
3. margin: 50px 100px
- top and bottom margins are 50px
- right and left margins are 100px
Let's take an example of shorthand property with two values:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 50px 100px;
background-color: #dc9fed;
}
</style>
</head>
<body>
<h2>margin shorthand property with two values</h2>
<div>This div element has two values: top and bottom margin of 50px, and a right and left margin of 100px.</div>
</body>
</html>
margin shorthand property with two values
4. margin 50px
- All four margins are 50px
Let's take an example of shorthand property with one value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 50px;
background-color: #dc9fed;
}
</style>
</head>
<body>
<h2>margin shorthand property with one value</h2>
<div>This div element has one value: top, bottom, left, and right margin of 50px.</div>
</body>
</html>
margin shorthand property with one value
The auto Value
By using the auto value the element will automatically adjust itself with the specified width, and the remaining space will be equally split between the left and right margins with the browser calcualtion.
Let's take an Example of margin auto value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:280px;
margin: auto;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>Margin auto value</h2>
<div>
This div will be adjust automatically horizontally centered because of using margin: auto;
</div>
</body>
</html>