How to solve the margin collapse problem in CSS

First, let's look at three situations where margin collapse occurs:

1. When two adjacent block-level elements meet, the upper element has a bottom margin margin-bottom and the lower element has a top margin margin-top, then the vertical distance between them takes the larger of the two values.

<style>
  .box1 {
     width: 150px;
     height: 100px;
     margin-bottom: 20px;
     background-color: rgb(201, 239, 98);
  }
  .box2 {
     width: 100px;
     height: 100px;
     background-color: rebeccapurple;
     margin-top: 10px;
  }
</style>
   <div class="box1"></div>
   <div class="box2"></div>

At this time, the vertical distance between the two boxes is not 30px, but 20px.

Solution:

Try to only add margin to one box.

2. For two nested block elements, if the parent element has no top margin and border, the top margin of the parent element will be merged with the top margin of the child element, and the merged margin will be the larger of the two.

<style>
        .box1 {
            width: 150px;
            height: 100px;
            margin-top: 20px; 
            /* border: 1px solid #000000; */
            background-color: red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            /* border: 1px solid #000000; */
            background-color: rebeccapurple;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

At this time, the two boxes will be merged, and the top margin will be 20px.

Solution:

① Define the top border for the parent element

② Define the top margin for the parent element

③Add overflow:hidden to the parent element;

④Add floating

⑤Add absolute positioning

3. If there is an empty block-level element, border, padding, inline content, height, and min-height do not exist, then there will be no obstruction between the upper and lower margins, and the upper and lower margins will be merged.

<p style="margin-bottom: 0px;">The distance between this paragraph and the following paragraph will be 20px</p>

<div style="margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">The distance between this paragraph and the paragraph above will be 20px</p>

It can be understood that the width of the middle div is 0 and the upper and lower margins are merged, and only the maximum value of the margin is taken.

This is the end of this article on how to solve the margin collapse problem in CSS. For more relevant CSS margin collapse content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: How to install ElasticSearch on Docker in one article

>>: Example of implementing text wrapping in html (mixed text and images in html)