Collapsing Margins in CSS: A Beginner&#s Guide

Barbara Streisand
Release: 2024-09-24 18:16:02
Original
1061 people have browsed it

Collapsing Margins in CSS: A Beginner

Introduction

There's nothing more frustrating than applying a style and having it not work as expected. Collapsing Margin is one phenomenon that causes unexpected styling outcomes. Thus, what is a collapsing margin and how does it affect margins in CSS?

Collapsing Margin

Collapsing margins stem from the CSS property margin, which controls the spacing outside an element. As the name suggests, collapsing margins occur when the margins of adjacent elements combine or 'collapse' into one, rather than adding up. This typically happens between sibling elements or between a parent and child element. For instance, if two sibling elements have margins—one with a 20pxbottom margin and the other with a 30px top margin—you might expect the total margin to be 50px. However, due to collapsing margins, only the larger margin of 30px will be applied, and the smaller margin of 20px will be collapsed.

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 30px;
}
Copy after login

Moreover, in cases where a parent element lacks padding or border, and its child element possesses a top margin, the margin may "collapse" beyond the parent, thereby impacting the parent's placement.

.parent {
    margin-top: 0;
}
.child {
    margin-top: 20px;
}
Copy after login

The 20px top margin from the .child might collapse outside of the .parent, moving the entire parent down by 20px.

This can confuse noob developers (well I never knew about it until recently), as the resulting spacing may not match their expectations.

Ways to work around it

  • Add Padding or Border: adding a small amount of padding or a border to the parent element will prevent margin collapse.
.parent {
    padding-top: 1px; /* or border-top: 1px solid transparent; */
}
Copy after login
  • Use of the overflow property: When the overflow property of the parent is set to anything other than visible (e.g., overflow: hidden;), it can prevent margin collapsing.
.parent {
    overflow: hidden;
}
Copy after login
  • Use Flexbox or Grid Layouts: These layout methods avoid margin collapsing issues by design.

Flexbox example:

.parent {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
    border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    margin: 20px 0; /* Vertical margins that won't collapse */
    background-color: lightblue;
}

Copy after login

Grid Example

.parent {
   display: grid; /* Grid layout */
   grid-template-rows: auto auto; /* Define two rows */
   border: 1px solid #000; /* Just for visibility */
 }

.child1, .child2 {
     margin: 20px 0; /* Vertical margins */
     background-color: lightgreen;
 }
Copy after login
  • Use Float or Inline-Block: Floating the child element or setting it to display: inline-block; will also prevent margins from collapsing. However, I rarely see float anymore but it is good to know in case of legacy code base.

Float example:

.parent {
    border: 1px solid #000; /* Just for visibility */
 }

 .child1, .child2 {
     float: left; /* Prevents margin collapsing */
     width: 100%; /* Full width */
     margin: 20px 0; /* Vertical margins */
     background-color: lightcoral;
 }
Copy after login

Inline block example

.parent {
   border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    display: inline-block; /* Prevents margin collapsing */
    width: 100%; /* Full width */
    margin: 20px 0; /* Vertical margins */
    background-color: lightyellow;
}
Copy after login

Conclusion

Understanding margin collapsing can significantly contribute to consistent and expected spacing in your web layout, particularly when working with block-level elements. It's worth noting that inline elements such as , , , etc. are generally unaffected by margin collapsing due to their distinct behavior in generating vertical margins compared to block-level elements. Margin collapsing primarily poses challenges with block-level elements, such as

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template