爲什麼我的頁面頂部有空白？

的mypage.html爲什麼我的頁面頂部有空白？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 
<title>Color Flash Cards</title> 
<link rel="stylesheet" href="css/index.css" /> 
</head> 
<body> 
<div id="header"> 
    <div id="title"> 
     <h1>Color Flash Cards</h1> 
    </div> 
</div> 
</body> 
</html>

index.css

body{ 
    background-color: #31859C; 
    margin-left: 0px; 
    margin-top: 0px; 
    overflow-x: hidden; 
} 
#header{ 
    margin-top: 0px; 
    height: 120px; 
    background: #9838CE; 
} 
#title{ 
    margin-top: 0px; 
}

結果：

Ghost Margin

哪裏餘量，其在第頂部（紫色之上）來自哪裏？我需要做些什麼才能擺脫它？我可以使用負值作爲margin-top來做到這一點，但這是「真正的」解決方案嗎？

來源

2013-05-11 FoamyGuy

可能是來自瀏覽器的默認填充？在'body'上嘗試'padding：0'。 – tobiv 2013-05-11 15:45:21

備註：您的文檔類型是作爲application/xml + xhtml提供的頁面，我懷疑你是這麼做的。 – Rob 2013-05-11 16:31:24

所有標題都可以與被取消了默認保證金：

h1 { 
    margin: 0; 
}

演示：

，如果你想避免這些怪癖我會建議使用如T his one一個css重置代碼和他們自己的風格。

來源

2013-05-11 15:47:17 Ian

兩種情況之一可能會導致這樣的：在身體

填充？將padding: 0;添加到身體。
上邊距H1。爲了解決這個問題添加overflow-hidden;到#header

添加overflow: hidden到#header將導致頭DIV包含它的內容（包括對H1保證金）。

來源

2013-05-11 15:46:34

設置標籤margin的h1到0：

h1 { margin: 0; }

見jsFiddle demo。

來源

2013-05-11 15:48:34

嘗試設置html的邊距爲。

html { 
margin:0; 
padding:0; 
}

來源

2013-05-11 15:51:02 ckpepper02

兩件事情：您可能要添加

body{ 
    padding:0; 
}

但是這並不是真正的問題，其H1標籤被破壞佈局

添加到您的CSS

h1{ 
margin-top:0; 
}

這裏有一點fiddle

來源

2013-05-11 15:51:48 lazyprogrammer

使用reset css默認瀏覽器設置將被重置。

http://meyerweb.com/eric/tools/css/reset/ 
enter code here

來源

2013-05-11 15:55:59 dsfg

爲什麼我的頁面頂部有空白？

回答

相關問題