Home »
CSS
Margins in CSS
CSS Margins: Here, we are going to learn about the margin properties in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on November 01, 2019
CSS margin property
CSS Margins are used to space around any element, for this we use "margin" property in the CSS.
Syntax:
Element{
margin: length|auto|initial|inherit;
}
Margin Collapsing
When two margins are touching each other vertically, they are collapsed. But when they touch horizontally, they do not collapse.
Example:
<!DOCTYPE html>
<head>
<style>
div {
margin: 20px;
}
</style>
</head>
<html>
<body>
<div>
Some content
</div>
<div>
Some more content
</div>
</body>
</html>
Output
They will be 20px apart since vertical margins collapse over one and other. (The spacing will not be the sum of two margins.)
Apply Margin on a Given Side
In CSS you can specify a given side to apply a margin too. The four properties provided for this purpose are,
- margin-left
- margin-right
- margin-top
- margin-bottom
Example:
<!DOCTYPE html>
<head>
<style>
#myDiv {
margin-left: 30px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<html>
<body>
<div id="myDiv">
Some content
</div>
</body>
</html>
Output
Negative Margins
CSS has properties that can be set to negative values. This property can be used to overlap elements without absolute positioning.
Example:
<!DOCTYPE html>
<head>
<style>
.over {
margin-left: -20px;
background-color: #f40;
color: #fff;
}
</style>
</head>
<html>
<body>
<div class="over">
Some content
</div>
</body>
</html>
Output
Margin property simplification
Here the shorthand is used to specify margin in every direction without writing for every direction.
Example:
<!DOCTYPE html>
<head>
<style>
p {
margin: 1px;
/* 1px margin in all directions */
background-color: #f40;
color: #fff;
}
</style>
</head>
<html>
<body>
<p>
Some content
</p>
</body>
</html>
Output
CSS for margin: length|auto|initial|inherit
margin: 1px;
margin: 1px 1px;
margin: 1px 1px 1px;
margin: 1px 1px 1px 1px;
Left, Right, Top and Bottom Margins
To provide margins for left, right, top and bottom to an object, we can use margin-left, margin-right, margin-top and margin-bottom properties respectively.
Example:
<!DOCTYPE html>
<head>
<style>
p {
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
margin-bottom: 30px;
/* 1px margin in all directions */
background-color: #f40;
color: #fff;
}
</style>
</head>
<html>
<body>
<p>This is line One.</p>
<p>This is line Two.</p>
<p>This is line Three.</p>
<p>This is line Four.</p>
</body>
</html>
Output
CSS Tutorial & Examples »