标头不会触及顶部。答案

【问题标题】：Header won't touch the top.标头不会触及顶部。
【发布时间】：2014-10-23 00:01:18
【问题描述】：

我的页眉不会触及我的页面顶部。我试过 padding: 0px;在我的标题 div 和正文中。什么都不会动它。我已将 html 添加到 css 并尝试了 margin:0px 和 padding:0px;。我正在阅读有关使用 CSS 重置的信息，但不确定是否有人在这方面取得了成功。

HTML

<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<head>

<title>Home</title>

</head>
<body>
<div class = "background">

<div class = "header">
<h1 class="Name">Title</h1>
<ul class="header">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>

</div>

</div>


</body>
</html>

CSS

body{
margin: 0px;
padding: 0px;
background-color: gray;}

.header {
width: auto;
margin: 0px;
padding: 0px;
background-color: black;
}

谢谢。

【问题讨论】：

试试html,body{margin:0; padding:0}
背景的html是什么？你应该发布一个 jsfiddle。
<!DOCTYPE html> 导致它。如何解决？我不知道
<!DOCTYPE html> 是标准的 html5 文档类型声明。我向您保证这不会导致它（好吧，我向您保证这不是问题可能是更好的说法。您绝对应该将此文档类型用于标准 html5）
@KaiQing 复制他的代码并将其删除。但我想我应该说，“你的代码中的某些东西导致<!DOCTYPE html> 创建空白”。如果你将* { margin: 0; padding : 0; } 添加到 CSS 中，它会修复它。

标签： html css

【解决方案1】：

您可以尝试像这样绝对定位标题：

.header {
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    background-color: black;
}

这将使用左侧和顶部尺寸作为偏移量将标题与视口进行比较。

小提琴：http://jsfiddle.net/w06fn6wn/

【讨论】：

【解决方案2】：

在 mystyle.css 的顶部添加一个重置

*{margin: 0; padding: 0;}

【讨论】：

【解决方案3】：

Working Fiddle

 * { margin: 0; padding : 0; }

body{
  background-color: gray;}

.header {
  width: auto;
  background-color: black;
}

【讨论】：

唯一的问题是您要重置每个元素的边距和填充。然后，OP 将不得不为通常预期的所有块级元素重新声明填充和边距。 p、h1-6、ul、li 等