为什么我的页面顶部有空白？

的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

为什么我的页面顶部有空白？

回答

相关问题