Home > Article > Web Front-end > Why does the parent block div sink when a div block is nested in a div block_html/css_WEB-ITnose
Why does the parent block div sink when a div block is nested in a div block_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:351735browse
Directly enter the code:
<style>body{ margin:0; padding:0;}#header{ height:100px; width:100%; margin-top:0; padding:0; background:#999;}#header #titletext{ margin-top:20px; margin-left:40px; padding:0;}#header #titletext #h5{ }#content{ }</style></head><body> <div id="header"> <div id="titletext"> <h5>XXX系统</h5> </div> </div> <div id="content"> </div> <div id="footer"> </div></body> My intention is to have this effect
But the result is this effect
I don’t understand why my header A blank area will appear on the screen. Which attribute did I write wrong?
Reply to discussion (solution)
position:absolute;
Add this
#header #titletext{position:absolute; margin-top:20px; margin-left:40px; padding:0;} Vertical margin compression
Consider removing #titletext{margin-top:20px;}
and changing it to #header {padding-top:20px;}
#header #titletext {
margin-top:20px; margin-left:40px;
padding:0;
<style type="text/css">body{ margin:0; padding:0;}#header{ height:100px; width:100%; margin-top:0; padding:0; background:#999; padding-top:20px;/*加上*/}#header #titletext{ /*注释掉margin-top:20px;*/ margin-left:40px; padding:0;}#header #titletext h5{/*这里的h5是标签选择器才对，因为你并没在HTML中为H5定义ID，所以不能加#*/ margin:0; padding:0;}#content{ }</style> Just change it like this, But this is quite messy
I suggest you
1. Reset all elements before writing styles. *{margin:0; padding:0}
2. Secondly, if you can use padding, you don’t need margin. For example, if you don’t use margin for your titletext element, just use the padding of the parent element #header, and it will display normally.
3. In addition, h5 is a title tag, which has upper and lower margins. You need to reset it to 0 first.
There are many problems with the same style as above. The problem you mentioned is that 39318b6f72ed39310530dfd69d0078e1 itself has margins. It's worth it,
Haha, there is a simple solution, which is to add the "border:1px solid #999" style to the header, that's it
#header{
height:100px ;
width:100%;
margin-top:0;
padding:0;
overflow:hidden;
background:#999;
}
Add overflow:hidden; in the ID header and you will get the desired effect
Add margin:0;padding:0 to all elements
because all elements are viewed in different browsers There are different margins and paddings by default under the device. If they are not reset to 0, adjusting compatibility will cause death.
The root cause of this problem is: margin collapse.
Please see the following reference to section 8.3.1 of the CSS2.1 standard:
The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
Translated into Chinese is:
If the in-flow node has no top-border and no top-padding, then its top margin will be the same as it The top marin of the first child is merged.
In your code, h5 has a default margin of 22, and titletext has a margin of 20. These two will undergo margin collapse. The result is that the top margin of titletext is 22.
Next, the titletext will perform margin collapse with the header. The result is that the top margin of the header is 22.
Next, the header will perform margin collapse with the body. The result is that the top margin of the body is 22.
Therefore, in fact, both the header and body have a top margin of 22 width, and the margin will not be drawn with the background color.
Do you understand? . . . .
Modification method,
Add border or padding to the header.