CSS margin: collapse property is used to collapse the top and bottom margin and form a single margin.
Left and right margin doesn’t collapse and form a single margin.
Syntax:
margin: 0 0 20px 0;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 2px dashed red;
background-color: orange;
text-align:center;
margin: 0 0 30px 0;
}
.paragraph2{
border: 2px dashed red;
background-color: pink;
text-align:center;
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<div class="paragraph1">This paragraph has bottom margin 30px; </div>
<div class="paragraph2">This paragraph has top margin 20px; </div>
<div class="description">Here, the first paragraph has bottom margin 30px and second paragraph has top margin 20px. The margin between first and second should be 50px. By adding first paragraph 30px and second paragraph 20px (30px + 20px) but due to margin:collapse, the margin end up only with 30px. And, collapse the 20px margin. This is how margin:collapse.</div>
</body>
</html>
CSS Margin property is used to put spaces outside defined borders. “Margin” property is the shorthand property of all four individual margin properties. i.e,
If you have three margin property values, the first value applies top, the second value applies left and right margins and the third value applies to the bottom.
Syntax:
.paragraph
{
margin: 10px 20px 5px;
}
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
border: 2px dashed red;
background-color: pink;
text-align:center;
margin: 10px 20px 5px;
}
</style>
</head>
<body>
<div class="paragraph">Top Margin is 10px; <br/> Left and Right margins are 20px;<br/> Bottom margin is 5px;</div>
</body>
</html>
If you have four margin property values, then the first value applies to the top, the second value applies to the right, the third value applies to the bottom and the fourth value applies to the left.
Syntax:
.paragraph
{
margin: 10px 20px 15px 10px;
}
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
border: 2px dashed red;
background-color: pink;
text-align:center;
margin: 10px 20px 15px 10px;
}
</style>
</head>
<body>
<div class="paragraph">Top Margin is 10px; <br/> Right margin is 20px;<br/> Bottom margin is 15px; <br/> Left margin is 10px;</div>
</body>
</html>
CSS Margin property is used to put a space outside defined borders. You can put margins individually into each side of the elements by using the following syntax.
