How to solve the problem of margin overlap

1. First, you need to know what will trigger the vertical margin collapse of two or more adjacent normal flow block elements

1. Two or more indicates that the quantity must be greater than one, and also indicates that folding is the interaction between elements. There is no such phenomenon that A and B fold, but B does not fold with A.

2. Adjacent means not separated by non-empty content, padding, border or clear, indicating their positional relationship.
Note that, if not separated, the margin-top of an element will be adjacent to the margin-top of its first child element in the normal flow (non-floating elements, etc.); only when an element's height is "auto", its margin-bottom will be adjacent to the margin-bottom of its last child element in the normal flow (non-floating elements, etc.).

3. The vertical direction refers to the specific direction. Only the vertical margin will be folded. In other words, the horizontal margin will not be folded.

2. So how to prevent the upper and lower margins of elements from collapsing?

1. The margins of floating elements, inline-block elements, and absolutely positioned elements will not collapse with the margins of other elements in the vertical direction (note that this refers to adjacent elements above and below)

2. The element that creates the block-level formatting context does not collapse margins with its child elements (note that this means that the element that creates the BFC and its child elements will not collapse)

We all know that the factors that trigger BFC are float (except none), overflow (except visible), display (table-cell/table-caption/inline-block), position (except static/relative)

Obviously, you can see that the factors that prevent adjacent elements from collapsing are a subset of the factors that trigger BFC. That is to say, if I set overflow:hidden for the upper and lower adjacent elements, although BFC is triggered, the upper and lower margins of the upper and lower elements will still collapse.

This problem actually has nothing to do with BFC. I hope everyone will not abuse BFC. You should know that BFC is not omnipotent. The original intention of creating BFC is only to allow the element itself (including its child elements) to correctly calculate its width and height. http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

The triggering factors for no folding are floating elements, inline-block elements, and absolutely positioned elements. This is only a subset of the factors for creating BFC, but it does not mean that the elements that create BFC will not fold, because BFC can also be created with overflow:hidden. On the contrary, if the parent element triggers the BFC, then its block-level child elements will be collapsed instead.

Here I wrote a DEMO to illustrate this problem: http://whycss.com/demo/collspan_demo.html The three situations of creating BFC are mentioned, and the result is that the upper and lower margins of the child elements will collapse.

The last one mentioned by Kejun is zoom. This is the zoom attribute originally supported by IE browser. Now only the latest browsers with webkit core support it. However, hasLayout can only be successfully triggered in browsers below IE8, and it has no effect on non-IE browsers, so you still need to create a BFC in the same way. For an introduction to hasLayout and BFC, please refer to my blog article http://www.smallni.com/?p=174

As for how to solve this problem, my suggestion is to use margins in the same direction when writing, such as setting them to top or bottom, because sometimes you don’t need to set float, inline-block or absolute for each element in practice.

<<: Linux system AutoFs automatic mount service installation and configuration

>>: Html+CSS drawing triangle icon

The JS hasOwnProperty() method detects whether a property is an object's own property.

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

1. Time difference functions (TIMESTAMPDIFF, DATE...

How to solve the problem of margin overlap

The JS hasOwnProperty() method detects whether a property is an object's own property.

Nginx+FastDFS to build an image server

Method of iframe adaptation in web responsive layout

Example of how to create a database name with special characters in MySQL

Vue implements three-dimensional column chart based on echarts

In-depth analysis of MySQL query interception

Sample code on how to implement page caching in vue mobile project

In html, set the scroll bar to automatically display when the content in the div exceeds

Detailed explanation of the application of Docker Swarm in continuous integration testing

docker compose idea CreateProcess error=2 The system cannot find the specified file

Recommend

Some Linux file permission management methods you may not know

The difference between html Frame, Iframe and Frameset

About MySQL 8.0.13 zip package installation method

Solution to MySQL restarting automatically

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

How to use Node.js to determine whether a png image has transparent pixels

How to use DPlayer.js video playback plug-in

Django2.* + Mysql5.7 development environment integration tutorial diagram

Use of js optional chaining operator

JavaScript to achieve a simple message board case

More popular and creative dark background web design examples

JavaScript to achieve skin effect (change background)

Summary of the process and common problems of connecting VS2019 to MySQL database

Guide to using env in vue cli

Kill a bunch of MySQL databases with just a shell script like this (recommended)