Home > Developer > Web Develop
Collapsing margins (outer margin merge), collapsingmargins
Opening
A common css style bugThe top or bottom margins of block elements are sometimes merged into a margin, which is called the combination of the outer margins, that is, collapsing margins.
Html & css:
<!DOCTYPE html> Effect:
The parent div contains a child div, And the css style obviously wants the child div to have a 20 PX margin-top relationship with the parent container. However, unfortunately, the parent div and the top margin of the Child div overlap, and inexplicably with the top margin of 20 PX with the body (the body is in the white background area ).
This bug is common and often overlooked, but it reveals a very important concept, that isCollapsing margins)You want to solve this problem thoroughly (of course, you can also modify it in chrome, but do you know the real reason ?), I still have to look at W3C official specifications. In order to make it easier to read, I have intercepted a translation from MDN:
The outer margin merge occurs in the following three basic scenarios:
1. Adjacent siblings
The outer margins of the adjacent elements are merged (except when the elements on the back are removed from the float ).
2. Adjacent siblings
If there is no border, padding, inline content, or clearance between the margin-top of a block element and its first child element, or there is no padding, inline content, height, min-height, or max-height separation between the margin-bottom of the Block Element and Its last child element. The outer margin is merged.
3. Empty Block Element
If there is no border, padding, inline content, height between the block element margin-top and margin-bottom, and it is separated by min-height, its upper and lower margins are merged.
As you can see, the above bug is Case 2, that is, you only need to set padding for the primary div (or border, etc., depending on the actual situation ).
Blog sync
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
