Html 车身标签未与顶部位置对齐

我有一个非常简单的

html

web页面，包含页眉、内容和页脚部分。由于某些原因，标题部分并没有定位到窗口的顶部，我做了一些错误的事情，但我无法找出在哪里。我可能在试图修复它时进一步弄乱了代码

    <div class="wrapper">
        <div class="header-wrapper">
            <div class="header">
                <div class="archive-year"> ARCHIVE</div>
                <div class="title">TITLE</div>
                <div class="date">DATE</div>
            </div>
        </div>
        <div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        </div>
        <div class="footer"><a href="http://www.website.net">FOOTER</a></div>
    </div>

小提琴示例：

是

.header包装{宽度：100%；背景颜色：000；最小高度：300px；边距：30pxauto；}

试试这些

.wrapper{margin:0px; padding:0px;width:100%;;font-family:Arial, Helvetica, sans-serif;}
.header-wrapper{width:100%; background-color:#000; min-height:300px;  margin:0px auto;}
.header{background-color:#000; background-color:red; width:800px;  margin:0px auto;}

---

<>注释：考虑使用填充而不是边距，

这是因为您设置的边距：

.archive-year {
    margin: 30px 10px;
}

.header {
    margin: 10px auto;
}

.header-wrapper {
    margin: 30px auto;
}

请检查更新的小提琴：

您可以使用填充：

希望这对你有所帮助，伙计检查一下这个：

---

我删除了你所有的

页边距上限：30px
您可以通过以下方式删除额外的页边距：
html{
边际：0px；
填充：0px；
身高：100%；
}
形体{
边际：0px；
填充：0px；
}
.包装纸{
宽度：100%；
保证金：0px自动；
身高：100%；
字体系列：Arial、Helvetica、无衬线字体；
}
.标题包装{
宽度：100%；
背景色：#000；
最小高度：300px；
}
.标题{
背景色：#000；
背景色：红色；
宽度：800px；
保证金：0自动；
}
.档案年{
位置：相对位置；
宽度：100%；
字体大小：20px颜色：#ccc；
}
.头衔{
位置：相对位置；
宽度：100%；
利润率：10px；
字体大小：20px颜色：#fff；
}
.日期{
位置：相对位置；
宽度：100%；
利润率：10px 10px；
字体大小：20px颜色：#1aa0e0；
}
.内容{
位置：相对位置；
宽度：100%；
利润率：30px 10px；
字体大小：12px颜色：#000；
}
.页脚{
位置：相对位置；
宽度：100%；
利润率：30px 10px；
字体大小：12px颜色：#000；
}

档案文件
标题
日期
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时出于偶然，有时出于故意（注入幽默等）。与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克（Richard McClintock）从《洛伦·伊普斯姆》（Lorem Ipsum）一段中查找了一个更为晦涩的拉丁语单词，即“Concertetur”，并查阅了古典文学中对该词的引用，发现了该词无可置疑的来源。Lorem Ipsum来自西塞罗于公元前45年所著《德菲尼布斯·博诺勒姆和马洛勒姆》（善与恶的极端）的第1.10.32节和第1.10.33节。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet..”来自第1.10.32节中的一行。以下是自1500年代以来使用的Lorem Ipsum的标准块，供感兴趣的人参考。西塞罗的“de Finibus Bonorum et Malorum”中的第1.10.32节和第1.10.33节也以其原始形式复制，并附有H.Rackham 1914年翻译的英文版本。

像这样使用边距是一个非常基本的错误尝试使用填充而不是边距，因为它会将布局移动到顶部边距的最大值

*{margin:0 auto; padding:0px;}
html {margin:0px; padding:0px; height: 100%;}
body, form {margin:0px; padding:0px;}
.wrapper{width:100%; margin:0px auto; height:100%; font-family:Arial, Helvetica, sans-serif;}
.header-wrapper{width:100%; background-color:#000; min-height:300px;}
.header{background-color:#000; background-color:red; width:800px;}
.archive-year{position:relative; width:100%; margin:0px 10px; font-size:20px color:#ccc;}
.title{position:relative; width:100%; margin:10px; font-size:20px color:#fff;}
.date{position:relative; width:100%; margin:10px 10px; font-size:20px color:#1aa0e0;}
.content{position:relative; width:100%; margin:30px 10px; font-size:12px color:#000;}
.footer{position:relative; width:100%; margin:30px 10px; font-size:12px color:#000;}

在您的代码
归档年
和
标题包装中
都应用了页边距顶部。若你们从那个里移除，那个么问题就解决了。
你们在存档年有3个边距。页眉包装器和将其向下推的.header

换成这个

.header包装{宽度：100%；背景颜色：#000；最小高度：300px；边距：0px自动；}
.header{背景色：#000；背景色：红色；宽度：800px；边距：0px自动；}
.存档年份{位置：相对；宽度：100%；边距：0px 10px；字体大小：20px颜色：#ccc；}
大多数地方都使用边距
你可以用填充物代替

检查小提琴我做了一些改动


这是您的CSS规则之一：

.header-wrapper{...  margin:30px auto;}

您定义的上边距为30px。我发现，通过一步一步地删除规则，然后检查页面的外观。
这就是您的所有页边距<代码>边距：10px 30px-
10px
为上/下，
30px
为左/右。我需要保持页眉包装
页边距：30px自动
但我需要在
标题包装的顶部和底部保留一些空间，如果我删除了边距，那么我必须使用填充。
.archive-year{
    padding: 10px 10px 0 10px;
}

.header-wrapper{...  margin:30px auto;}