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)

How to solve the margin collapse problem in CSS

CSS3 frosted glass effect

Detailed explanation of the production principle of jQuery breathing carousel

Detailed explanation of persistent storage of redis under docker

Implementation of nested jump of vue routing view router-view

How to solve the mysql ERROR 1045 (28000)-- Access denied for user problem

Introduction to HTML_PowerNode Java Academy

A very detailed summary of communication between Vue components

Interpreting MySQL client and server protocols

Use SWFObject to perfectly solve the browser compatibility problem of inserting Flash into HTML

Share 101 MySQL debugging and optimization tips

Recommend

Best Practices Guide for MySQL Partitioned Tables

Detailed tutorial on using VMware WorkStation with Docker for Windows

Nginx Location directive URI matching rules detailed summary

Summary of tips for setting the maximum number of connections in MySQL

mysql 8.0.19 win10 quick installation tutorial

Detailed explanation of the basic usage of the auxiliary function mapGetters in vuex

Linux process management tool supervisor installation and configuration tutorial

The way to represent colors in HTML is by using 6-digit hexadecimal codes, RGB or keywords.

Vue Element front-end application development conventional Element interface components

vue-cli configuration uses Vuex's full process record

Centos 7.4 server time synchronization configuration method [based on NTP service]

Solution for creating multiple databases when Docker starts PostgreSQL

WeChat applet implements calculator function

MySQL InnoDB monitoring (system layer, database layer)

Detailed explanation of Docker's most commonly used image commands and container commands