Solution to the problem of child element margin-top causing parent element to move

Problem Description

Today, when I was modifying the page style, I encountered a situation where I set margin-top on a child element, but it did not create a gap between the child element and the parent element. Instead, it acted on the parent element, causing the parent element to have a margin-top effect.

Today I will talk about the cause of the whole problem and the solution.

Problem Analysis

There is such a text on MDN:

The top margin ( margin-top ) and margin-bottom bottom ) of a block are sometimes combined (collapsed) into a single margin whose size is the maximum of the individual margins. This behavior is called邊距折疊. Note: Only the top and bottom margins will collapse, not the left and right margins.

There are three situations where margin collapse occurs:

1. Between adjacent elements on the same layer

<div class="A">Element A</div>
<div class="B">Element B</div>

<style>
.A,
.B {
  width: 50px;
  height: 50px;
}
.A {
  background: yellow;
  margin-bottom: 10px;
}
.B {
  background: pink;
  margin-top: 20px;
}
</style>

The space between the two p tags above is 20px.

Solution:

The second element B sets clearfix

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

2. There is no content between parent and child elements

In this example, there are no other elements between the A and B elements and the parent element box:

<div class="box">
    <div class="A">Element A</div>
    <div class="B">Element B</div>
</div>
<div class="next">Next</div>

<style>
.box {
  margin-top: 10px;
  margin-bottom: 10px;
  background: #eee;
}
.A,
.B {
  width: 50px;
  height: 50px;
}
.A {
  background: yellow;
  margin-top: 20px;
}
.B {
  background: pink;
  margin-bottom: 20px;
}
.next {
  height: 50px;
  background: #eee;
}
</style> 

Solution:

• The parent element creates a block-level formatting context ( overflow:hidden )
• The parent element sets the top and bottom borders ( border: 1px solid transparent )
• The parent element sets the top and bottom padding ( padding: 1px 0 )
• Sub-elements are arranged by float or position .

Note: Even if you set the parent element's margin to 0, margin: 0 , the margins of the first or last child element will still "overflow" outside the parent element.

3. Empty block-level elements

When element B's margin-top is directly attached to element A's margin-bottom ( that is, there is no content in the middle element ), border collapse will also occur.

<div class="top">top</div>
<div class="middle"></div>
<div class="bottom">bottom</div>

<style>
.top,.bottom {
  width: 50px;
  height: 50px;
  background: pink;
}
.middle {
  margin-top: 10px;
  margin-bottom: 20px;
}
</style> 

Solution:

• middle element clears float: clearfix
• The middle element creates a block-level formatting context: overflow: hidden
• The middle element is set to an inline block element: display: inline-block;
• Set the height of the middle element: height: 1px;
• Set the minimum height of the middle element: min-height: 1px;
• Set border for the middle element: border-top: 1px solid transparent;
• Set padding for the middle element: padding-top: 1px;

Precautions

• If the margin involved in folding contains negative values, the value of the folded margin is the sum of the largest positive margin and the smallest negative margin (that is, the negative margin with the largest absolute value); that is to say, if -10px, 10px, and 30px are stacked together, the margin range is 30px-10px=20px.
• If all margins involved in the folding are negative, the value of the folded margin is the value of the smallest negative margin. This rule applies to adjacent and nested elements.

Reference link https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

This is the end of this article about how to solve the problem of child element margin-top causing parent element movement. For more information about child element margin-top causing parent element movement, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that you will support 123WORDPRESS.COM in the future!