Header CSS未顶页生效，顶部出现多余青色条问题求助

这是典型的**CSS外边距塌陷（Margin Collapse）**问题，再加上你的HTML结构有小瑕疵，共同导致了这个奇怪的顶部线条。我来给你拆解清楚：

为什么会出现这条青色线条？ #

1. 浏览器默认给<h2>这类标题元素设置了margin-top样式（你可以在浏览器开发者工具里查看，一般是1em左右）
2. 你的#header是块级元素，但它没有设置padding、border，也没有创建独立的块格式化上下文（BFC）。这种情况下，子元素<h2>的顶部外边距会“穿透”父元素，直接作用在父元素的外面，导致#header上方出现一段空隙，露出了body的青色背景。
3. 你在<h2>前加任意字符后，这个字符成为了#header里的第一个子元素，<h2>的margin-top就只会和这个字符产生间距，不会再溢出到父元素外部，所以空隙就消失了——这其实是无意间阻断了外边距塌陷。

另外还要提一句：你的HTML结构有不符合规范的地方！<div id="header">居然放在了<body>标签外面，所有页面可见内容都应该包裹在<body>内部，浏览器虽然会容错处理，但这种不规范结构也可能加剧样式渲染的异常。

几种靠谱的解决方案 #

方案1：给#header添加顶部内边距或边框 #

给父元素加一点点顶部内边距或者边框，就能轻松阻断外边距塌陷：

#header { 
    background: black; 
    color: white; 
    font-family: Arial; 
    height: 10%; 
    text-align: center;
    padding-top: 1px; /* 用border-top: 1px solid black;也可以 */
}

方案2：让#header创建BFC #

通过设置overflow: hidden（其他BFC触发条件比如display: flow-root、float: left也可以，不过overflow: hidden最省心），让父元素形成独立的格式化上下文，阻止子元素的margin溢出：

#header { 
    /* 保留原有样式 */
    overflow: hidden;
}

方案3：移除h2的默认margin-top #

直接从根源去掉标题元素的顶部外边距：

#header h2 {
    margin-top: 0;
}

方案4：修正HTML结构（必做） #

把#header移到<body>内部，同时修复结尾的标签拼写错误（你写的是</hmtl>，应该是</html>）：

<html> 
<head> 
<title>This is a page used by admins to change the content.</title> 
<link REL="STYLESHEET" TYPE="text/css" HREF="../includes/style.css"> 
</head> 
<body style="background-color:cyan;"> 
<!-- 把header移到body里 -->
<div id="header"> 
<h2> 
<strong> Admin page. </strong> 
</h2> 
</div> 

<!-- 以下是原来的内容 -->
<div id="contentwrapper"> 
<div id="contentcolumn"> 
<div class="innertext"> 
<h3> 
<p> Insert your credentials here: Note that if you log in, you will be redirected to the main page.</p> 
</h3> 
<form action="index.php" method="post" autocomplete="off"> 
<input type="text" name="username" placeholder="Username" /> 
<input type="password" name="password" placeholder="Password" /> 
<input type="submit" value="Submit" /> 
</form> 
</div> 
<?php if (isset($error)) { ?> 
<strong> 
<small style="color:#aa0000;"> <!-- 这里颜色值少了#，建议补上 -->
<?php echo $error; ?> 
</small></strong> 
<?php } ?> 
</div> 
</div> 
<br> 
<br> 
<br> 
<br> 
<div id="footer"> 
<a href="../index.php"> Main Page </a> 
</div> 
</body> 
</html> <!-- 修正拼写错误 -->

（顺便提一句：你错误提示里的颜色aa0000应该写成#aa0000，否则不会生效哦）

内容的提问来源于stack exchange，提问作者Kostas M