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
Recommend
MySQL series tutorial on understanding the use of union (all) and limit and exists keywords
Table of contents 1.union: You can add query resu...
How to write DROP TABLE in different databases
How to write DROP TABLE in different databases 1....
Detailed explanation of the idea of distributed lock in MySQL with the help of DB
Preface Whether it is a stand-alone lock or a dis...
CSS3 realizes the mask barrage function
Recently I saw a barrage effect on B station call...
JS implements jQuery's append function
Table of contents Show Me The Code Test the effec...
ElementUI implements cascading selector
This article example shares the specific code of ...
Solution to the ineffectiveness of flex layout width in css3
Two-column layout is often used in projects. Ther...
Detailed tutorial on installing and configuring MySql5.7 on Ubuntu 20.04
Table of contents 1. Ubuntu source change 2. Inst...
Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection
In the later stage of exploiting SQL injection vu...
4 ways to implement routing transition effects in Vue
Vue router transitions are a quick and easy way t...
JavaScript to achieve the effect of clicking on the self-made menu
This article shares the specific code of JavaScri...
Several methods of implementing carousel images in JS
Carousel The main idea is: In the large container...
How to configure Openbox for Linux desktop (recommended)
This article is part of a special series on the 2...
MySQL database SELECT query expression analysis
A large part of data management is searching, and...
Detailed description of the life cycle of React components
Table of contents 1. What is the life cycle 2. Lo...