Summary of margin consolidation issues

Merger issues ：

The vertical adjacent outer margins of block level elements are merged , Inline elements don't actually occupy the upper and lower margins . The left and right outer margins of inline elements 、 Floating outer margins are also merged . Outer margin specifies a negative outer margin value , But be careful when using .
float Will inline elements display convert to block. Block level elements .
absolute、fixed Will inline elements display convert to block. Block level elements .

The vertical adjacent outer margins of block level elements are merged ： There is only one setting for merging ： The above block level element settings margin-bottom; The following block level element settings margin-top. The attribute values of two can be positive or negative .

1： When both attribute values are positive or negative , Take the larger absolute value . If the final result is positive , There is a gap between these two block level elements ; If the final result is negative , Then there is an overlay between these two block level elements , The bottom will cover the top , The coverage distance is Final The absolute value of the result .

2： When two attribute values have positive and negative , Take the sum of the two attribute values , As the final result . If the final result is positive , There is a gap between these two block level elements ; If the final result is negative , Then there is an overlay between these two block level elements , The bottom will cover the top , The coverage distance is final result The absolute value of .

Inline elements The margin calculation is the same as above , Because the width and height of inline elements , Up and down inside and outside margins Don't take effect , I didn't cancel the corresponding value .