CSS horizontal margin and vertical margin

1. When two inline elements are adjacent, the distance between them is the margin-right of the first element plus the second element's Margin-left

2. The distance between two block-level elements is not the sum of Margin-bottom and margin-top, but the larger of the two. This phenomenon is known as the "collapse" of margin, meaning that smaller margin collapses into larger margin.

3. Margin between nested boxes: The margin of the child block is referenced by the content of the parent block. That is, the actual distance is the child margin + parent padding.

There is a difference between IE and Firefox in detail. If the height value of the parent element is set, the result is completely different if the height of the child element exceeds that height value at that time. At this point, IE will automatically expand, keeping the margin-bottom space of the child elements and the padding-bottom of the parent element. Firefox does not, however, ensure that the parent element's height is fully aligned, and that the child element will exceed the parent element's range.

4.margin values can be set to a negative value. When there is a parent-child relationship between the blocks, you can "detach" the child blocks from the parent block by setting the sub-fast margin parameter to a negative number.

CSS horizontal margin and vertical margin