（html/css）我如何刪除從我的標題出現的邊距，並使其僅適用於我的徽標？

我正在嘗試爲我的網站創建一個包含徽標的標頭。我希望徽標從頭部div的頂部有一個5像素的邊距，但是當我在包含徽標的div上添加「margin-top：5px」時，頭部div向下推5像素代替。（html/css）我如何刪除從我的標題出現的邊距，並使其僅適用於我的徽標？

<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，對不起。

來源

2014-02-20 Ashley Merry

如果添加到您的html或創建一個小提琴，你會有一些答案... – Alvaro

能否請您提供您的'HTML'？ – Siyah

除了您的HTML，請考慮添加一個圖像或jsFiddle演示問題和/或預期的結果。 –

只有當您將父（含）元素設置爲非靜態（如相對）時，該定位才起作用。然後，您可以使用相對或絕對位置（從流中取出它）來定位元素。

像這樣：

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; 
    }

來源

2014-02-20 18:07:26

這將刪除頁面頂部的邊距，但徽標仍然沒有距標題頂部5個像素的邊距。 http://jsfiddle.net/zzBg6/2/ –

您添加了#HeaderLogo的填充頂部。擺脫它。然後它工作。 –

非常好的問題，

我看到你知道如何使用填充這是很好的。如果只是簡單地添加一個padding-top：5px;到圖像div，它應該從導航欄的頂部向下移動圖像5px！

來源

2014-02-20 17:48:03 Oak

這將刪除頁面頂部的頁邊空白處，但徽標仍然沒有標題頂部的5像素邊距。 –

（html/css）我如何刪除從我的標題出現的邊距，並使其僅適用於我的徽標？

回答

相關問題