Question

的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的负值来做到这一点，但这是“真正的”解决方案吗？

Answer 1

所有标题都有默认保证金，可以通过以下方式取消：

h1 {
    margin: 0;
}

演示：

如果您想避免这些怪癖并自行设置样式，我建议您使用像c his one这样的css重置代码。

Answer 2

可能导致此事的两件事之一：

身体填充？将padding: 0;添加到正文。
H1的上边距。要解决此问题，请将overflow-hidden;添加到#header

将overflow: hidden添加到#header会导致标题DIV包含其内容（包括H1上的边距）。

Answer 3

将margin标记的h1设置为0：

h1 { margin: 0; }

请参阅jsFiddle demo。

Answer 4

尝试将html的边距设置为 0 。

html {
margin:0;
padding:0;
}

Answer 5

两件事：您可能想要添加

body{
  padding:0;
 }

但这不是真正的问题，它正在破坏布局的H1标签

将此添加到您的css

h1{
margin-top:0;
}

这里有一点fiddle

Answer 6

使用reset css默认浏览器设置将被重置。

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

为什么保证金位于我页面的顶部？

6 个答案: