元素不在左上角开始

Question

我正在制作一个简单的网站，我是新手，我想知道一些事情。我制作了一个带有导航栏的 header，我希望它与屏幕同宽，并且一直到顶部。但是，0,0 不在左上角，我需要添加值为 -8px 的左边距和 -16px 的上边距。为什么？我认为应该从左上角开始是不是错了？我错过了什么吗？

.header {
    background-color: rgba(0,0,0,0.50);
    margin: -8px;
    margin-top: -16px;
    width: 100%;
    position: fixed;
}

Answer 1

存在特定于浏览器的默认样式。你需要覆盖那些。您需要添加其他样式

html, body {
   margin: 0;
   padding: 0;
}

Answer 2

删除不需要的边距。 header还需要指定高度，在处理简单的网站需求时最好使用hex #fff而不是rgba。只是让事情变得更容易。还要在 HTML 和 Body.

上指定默认样式

.header {
    background-color:#000;
    width: 100%;
    height:100px;
    position: fixed;
}

html, body {
   margin: 0;
   padding: 0;
}

<div class="header">
    
</div>

Element doesn't begin in the top left corner