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>
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>There are many problems with the same style as above. The problem you mentioned is that
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
