CSS features: overlay the blank margins

The blank bilateral margin is a CSS feature that is very easy to misunderstand. It is not a CSS bug, but it will cause a lot of trouble if we misunderstand it.
First look at the following demoCode:

< ! Doctype Html >
< Html >
< Head >
< Meta Charset = " UTF-8 " >
< Title > Padding overlay demo@Mr.Think </ Title >
< Style >
Body {width: 300px; font-family: ' '; 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 > Padding overlay demo@Mr.Think </ P > </ Div >
</ Body >
</ Html >

This is a simple example of embedding P in a div element. Do not copy and save it as HTML for testing. After you have read the code above, do you think it shows an effect for you?

Well, now you can copy the above Code, save it locally, and open it in a browser. You will be surprised to find that the effect it presents to you is as follows:

Why? In CSS, the height of an element with a block level sub-element is calculated. If the element does not have a vertical border or fill, the height is the distance between the top and bottom border edge of its sub-element. therefore, the blank edges at the top and bottom of the child element are highlighted at the periphery of the element. the 15px margin of the P element and the 10px margin of the DIV element form a single 15px vertical blank edge. In addition, this blank edge in the form is not surrounded by the DIV, it is displayed on the perimeter of the div. so we can see the second one.
How can this problem be solved? I recommend two solutions:
First, define a transparent border for the peripheral element. In this example, addBorder: 1px solid transprent;
Second, define the padding for the peripheral element. In this example, addPadding: 1px
In addition, it can be achieved through absolute positioning of peripheral elements, or defining sub-element floating.

 

The original post is published on mr. Think's blog:Http://mrthink.net/css-margin-overlying-way/Reprinted please note.