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

【问题标题】：(html/css) How do I remove the margin appearing from my header, and have it only apply to my Logo?(html/css) 如何删除标题中出现的边距，并使其仅适用于我的徽标？
【发布时间】：2014-02-20 17:43:57
【问题描述】：

我正在尝试为我的网站创建一个包含徽标的标题。我希望徽标从包含在其中的标题 div 的顶部有 5 像素的边距，但是当我将“margin-top：5px”添加到包含徽标的 div 时，标题 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 的新手，抱歉。

【问题讨论】：

如果你添加你的 html 或者创建一个 fiddle 你会有一些答案...
你能提供你的HTML吗？
除了您的 HTML 之外，请考虑添加一个图像或 jsFiddle 来演示问题和/或预期结果。
这叫margin collapse

标签： html css margin

【解决方案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;
     }

【讨论】：

这会删除页面顶部的边距，但是徽标仍然无法从页眉顶部保留 5 像素的边距。 jsfiddle.net/zzBg6/2
您添加了 #HeaderLogo 的填充顶部。摆脱它。然后就可以了。

【解决方案2】：

非常好的问题，

我知道你知道如何使用填充，这很好。如果只是简单地添加一个 padding-top: 5px;到图像 div 它应该只是将图像从导航栏顶部向下移动 5px！

【讨论】：

这会删除页面顶部的边距，但是徽标仍然无法从页眉顶部保留 5 像素的边距。