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

XHTML introductory tutorial: Use of list tags

How to solve the problem of margin overlap

XHTML introductory tutorial: Use of list tags

Implementation method of Nginx+tomcat load balancing cluster

Markodwn's detailed explanation of the idea of synchronous scrolling with title alignment

The problem of jquery.form.js denying access in IE and the input upload button must be actively clicked

UDP DUP timeout UPD port status detection code example

vue-cli introduction and installation

How to solve the problem that the project in eclipse cannot be added to tomcat

js method to realize shopping cart calculation

jQuery+Ajax to achieve simple paging effect

HTML markup language - table tag

Recommend

Detailed explanation of creating a view (CREATE VIEW) and usage restrictions in MySQL

Implement 24+ array methods in JavaScript by hand

Getting Started: A brief introduction to HTML's basic tags and attributes

How to quickly build an LNMP environment with Docker (latest)

Summary of Linux user groups and permissions

Do you know the meaning of special symbols in URL?

JavaScript to achieve product query function

Native js to realize bouncing ball

Examples of 4 methods for inserting large amounts of data in MySQL

How to fix abnormal startup of mysql5.7.21

MySQL 8.0.15 installation and configuration method graphic tutorial (Windows 10 X64)

Detailed explanation of the idea of using mysqldump+expect+crontab to implement mysql periodic cold backup in linux

JS Asynchronous Stack Tracing: Why await is better than Promise

How to dynamically modify the replication filter in mysql

Summary of the characteristics of SQL mode in MySQL