CSS features: blank margins overlay each other

White-double distance is a highly misunderstood CSS feature. It is not a CSS bug, but if we misunderstand, it will cause you a lot of trouble.
First look at the following demo code:

" ! DOCTYPE html " " > HTML , head , , Meta charset = " utf-8 " " title " blank margin overlay demo@mr.think </ title , > style body{width:300px; font-family: ' Microsoft Ya-black '; font-size:1em text-indent:10px; line-height:1.25} div{ Background: #a40000; margin:10px} Div p{background: #eee; margin:15px} </ Style </ head > , body , , Div >< P blank margin Overlay demo@mr.think </ P ></ Div </ body </ HTML

This is a simple example of a DIV element nested p, do not copy Save as an HTML test, after you read the above code, do you think it gives you the effect of rendering the following diagram?

OK, now you can copy the above code, save it locally, and then open it in the browser. You will be surprised to find that the effect it presents to you is this:

Why is that so? in CSS, the height of the element that has a block-level child element is calculated in terms of height, if it has no vertical border and padding, and that is the distance between the top of the child element and the edge of the bottom border. The top and bottom margins of the child elements are highlighted to the outer edge of the element. The 15px outer margin of the P element forms a single 15px vertical margin with the outer margin of the DIV element's 10px, in addition, the blank side of the form is not surrounded by the div, but is rendered at the perimeter of the div. So, We see a second effect chart.
How to solve? I recommend two ways to solve:
First, you define a transparent border for the perimeter element. In this case, add border:1px solid transparentto the style div;
Second, define the padding for the outer element for the inner margin ... In this case, add padding:1px to the style div
In addition, it can be achieved by the absolute positioning of peripheral elements, or by defining the floating of child elements.