CSS Margin Collapse

CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
Post Reply
Guest

CSS Margin Collapse

Post by Guest »

CSS Margin Collapse


Sometimes two margins collapse into a single margin.

Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single
margin that is equal to the largest of the two margins.
This does not happen on left and right margins! Only top and bottom margins!
Look at the following example:

Example
Demonstration of margin collapse:

h1 {  margin: 0 0 50px 0;}h2 {  margin: 20px 0 0 0;}
Try it Yourself »

In the example above, the <h1> element has a bottom margin of 50px and
the <h2>
element has a top margin set to 20px.
Common sense would seem to suggest that the vertical margin between the <h1>
and the <h2> would be a total of 70px (50px + 20px). But due to margin collapse,
the actual margin ends up being 50px.


Test Yourself With Exercises

Exercise:
Add a 20 pixels left margin to the <h1> element.


<style>
h1 {
: 20px;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>



Submit Answer »
Start the Exercise



All CSS Margin Properties


Property
Description


margin
A shorthand property for setting all the margin properties in one declaration


margin-bottom
Sets the bottom margin of an element


margin-left
Sets the left margin of an element


margin-right
Sets the right margin of an element


margin-top
Sets the top margin of an element














★
+1

Reference: https://www.w3schools.com/css/css_margin_collapse.asp
Top
Post Reply

Return to “CSS”