2

我的页面.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>

索引.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;
}

结果：

幽灵边缘

顶部（紫色上方）的边距来自哪里？我需要做什么才能摆脱它？我可以使用负值margin-top来做到这一点，但这是“真正的”解决方案吗？

4

6 回答 6

5

所有标题都有一个默认边距，可以通过以下方式取消：

h1 {
    margin: 0;
}

演示：Dabblet 演示

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

于 2013-05-11T15:47:17.337 回答
2

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

  1. 填充在体内？添加padding: 0;到正文。

  2. 上的上边距H1。为了对抗这个添加overflow-hidden;到#header

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

于 2013-05-11T15:46:34.433 回答
0

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

html {
margin:0;
padding:0;
}
于 2013-05-11T15:51:02.673 回答
0

两件事：您可能想要添加

body{
  padding:0;
 }

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

将此添加到您的CSS

h1{
margin-top:0;
}

这是一个小小提琴

于 2013-05-11T15:51:48.853 回答
0

将marginofh1标签设置为0：

h1 { margin: 0; }

见jsFiddle demo。

于 2013-05-11T15:48:34.990 回答
0

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

http://meyerweb.com/eric/tools/css/reset/
enter code here
于 2013-05-11T15:55:59.547 回答