How to solve the margin collapse problem in CSS

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)

Recommend

Intellij IDEA quick implementation of Docker image deployment method steps

Table of contents 1. Docker enables remote access...

How to avoid the trap of URL time zone in MySQL

Preface Recently, when using MySQL 6.0.x or highe...

Docker file storage path, get container startup command operation

The container has already been created, how to kn...

Detailed explanation of the pitfalls of add_header in nginx configuration tutorial

Preface add_header is a directive defined in the ...

Div adaptive height automatically fills the remaining height

Scenario 1: Html: <div class="outer"...

Some details about semicolons in JavaScript

Preface Semicolons in JavaScript are optional, an...

Detailed explanation of how Angular handles unexpected exception errors

Written in front No matter how well the code is w...

JavaScript implements three common web effects (offset, client, scroll series)

Table of contents 1. Element offset series 2. Ele...

Detailed explanation of Vue's keyboard events

Table of contents Common key aliases Key without ...

How to use commands in Mysql to achieve hierarchical search help detailed explanation

Preface This article mainly introduces the releva...

How to check if the firewall is turned off in Linux

1. Service method Check the firewall status: [roo...

Linux sar command usage and code example analysis

1. CPU utilization sar -p (view all day) sar -u 1...

Native JS realizes compound motion of various motions

This article shares with you a compound motion im...

5 common scenarios and examples of JavaScript destructuring assignment

Table of contents Preface 1. Extract data 2. Alia...

JavaScript+HTML to implement student information management system

Table of contents 1. Introduction 2. Rendering 3....