(html/css)如何删除页眉中出现的边距，并使其仅适用于我的徽标

Question

我正在尝试为我的网站创建一个标题，其中包含一个徽标。我希望徽标从包含在其中的标题div的顶部起有5个像素的边距，但是当我向包含徽标的div添加"margin-top:5px"时，标题div会向下推5个像素。

<div id="background">
<div id="HeaderGrey">
<div id="HeaderLogo">
<img src="CHBadgeLogo.png" />
</div>
</div>
<div id="HeaderShaderTop"></div>
<div id="HeaderShaderBottom"></div>
</div>

CSS

body {
margin: 0;
padding: 0;
}
#background  { 
left: 0px; 
top: 0px; 
position: relative; 
margin-left: auto; 
margin-right: auto; 
width: 100%;
height: 600px; 
overflow: hidden;
z-index:0;
background-color: #303030;
} 
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
}

我想这会有一个非常容易的修复，对不起，我只是html/css的新手。

Answer 1

只有当您将父元素(包含元素)设置为非静态元素(如相对元素)时，定位才有效。然后可以使用相对或绝对来定位元素(将其从流中移除)。

像这样：

body {
margin: 0;
padding: 0;
position:relative;
}
#background  { 
left: 0px; 
top: 0px; 
margin-left: auto; 
margin-right: auto; 
width: 100%;
height: 600px; 
overflow: hidden;
z-index:0;
background-color: #303030;
position:relative;
} 
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
position: relative;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
position: absolute;
}

Answer 2

非常好的问题，

我知道你知道如何使用填充物，这很好。如果只是简单地添加一个填充顶部：5px；对于imagediv，它应该只将图像从导航栏顶部向下移动5px！