CSS Margin Collapse

PREPARATIONX December 25, 2021

 

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>

Start the Exercise

All CSS Margin Properties

PropertyDescription
marginA shorthand property for setting the margin properties in one declaration
margin-bottomSets the bottom margin of an element
margin-leftSets the left margin of an element
margin-rightSets the right margin of an element
margin-topSets the top margin of an element
Tags
PREPARATIONX

Posted by PREPARATIONX

Our niche is creating personalised learning experiences for every type of learner. The preparationx way of learning provides students a learning platform where they can learn, engage and be excited about charting their own path to discover the world. preparationx – The Learning App brings together the best teachers, technology, content, media for creating a seamless, world class learning experience for each and every student.

Post a Comment

0 Comments