頁面頂部和頁眉之間的空格

我正在嘗試完成頁眉，但頁面頂部和頁眉之間存在大量空間。我想保持我的形象，但頂部的標題，但相同的大小。這裏是我的代碼：頁面頂部和頁眉之間的空格

HTML

<div id="header_logo-clearfix"> 
    <div id="header_logo"><a href="file:///C:/Users/Swag/Desktop/My%20Website/Home/home.html"><div id="logo"><img src="Header/banner.png" alt="Logo" align="middle" width="300"height="100"></a> 
    </div> 
</div>

CSS

#header_logo-clearfix { 
    width: 100%; 
    height: 180px; 
    margin: 0; 
    padding: 0; 
    display: block; 
    background-color: #02236a; 
} 

#header_logo { 
    margin-left: auto; 
    margin-right: auto; 
    width: 20%; 
    margin-top: 40px; 
}

JSFiddle。

來源

2015-04-06 ieblake

的marrgin-top: 40px如果你只格式化你的HTML正確.... – 2015-04-06 09:20:14

這是因爲#header_logo {有margin-top: 40px;只要刪除它將解決您的問題。

編輯：

添加padding-top:40px;反而會降低你的形象。

檢查Fiddle.

新更新的CSS：

#header_logo-clearfix { 
    width: 100%; 
    height: 180px; 
    margin: 0; 
    padding: 0; 
    display: block; 
    background-color: #02236a; 
} 

#header_logo { 
    margin-left: auto; 
    margin-right: auto; 
    width: 20%; 
    padding-top: 40px; 
}

來源

2015-04-06 09:18:44 ketan

它使背景上去，然後我怎麼向下移動圖像？ – ieblake 2015-04-06 09:19:26

給予'padding-top：40px;'。 – ketan 2015-04-06 09:21:10

謝謝@ketan，我會在3分鐘內將它標記爲正確lol – ieblake 2015-04-06 09:28:28

您有失蹤<div>標籤這裏

<div id="logo"><img src="Header/banner.png" alt="Logo" align="middle" width="300"height="100">

ID爲「標誌」的DIV不具有相應的結束標記。我不確定這是否能解決問題，但肯定會在低端瀏覽器中出現意外行爲，這些瀏覽器無法自動匹配缺少的HTML標記。

來源

2015-04-06 09:19:32 Diptendu

取下#header_logo類

檢查這個fiddle

來源

2015-04-06 09:22:35 Jackson

這已經在3分鐘前回答了... – 2015-04-06 09:22:53

我不知道他何時發佈答案....：| – Jackson 2015-04-06 09:23:49

頁面頂部和頁眉之間的空格

回答

相關問題