Question

我刚开始创建一个网站而且我已经陷入了一个基本的角色，我无法想到解决我生活的方法。我想要做的是删除顶部的空间，但我没有设置任何导致这个的东西。感谢任何帮助，谢谢：）

http://jsfiddle.net/mexicanbandit/f0hdqcgu/6/

body {
    background-color: #307189;
}

.container {
    margin: 0 auto;
    max-width: 48rem;
    width: 90%;
}

/***** header *****/
header {
    background-color: #A2CEDD;
}

h1 {
    font: 7rem Champagne and Limousines, sans-serif;
    color: #00668C;
}

Answer 1

<h1>元素具有默认边距。您可以通过添加margin:0：

来删除它

h1 {
    font: 7rem Champagne and Limousines, sans-serif;
    color: #00668C;
    margin:0;
}

<强> jsFiddle example

您可能还想检查CSS重置，它将尝试并规范化浏览器之间的CSS差异。

Answer 2

默认情况下，h1周围有一个边距。如果您使用浏览器开发工具（ F12 ）进行检查，您可以看到这一点。

您需要将其CSS设置为margin:0;或margin-top:0;以摆脱此问题。

h1 {
    font: 7rem Champagne and Limousines, sans-serif;
    color: #00668C;
    margin:0;
}

body也会有一个小的边距或填充，所以如果你想删除所有空格，你也可以将其设置为0.处理浏览器变化的标准做法是：

html,body {
    margin:0;
    padding:0;
}

Updated Fiddle

Answer 3

这是因为你的h1具有巨大的利润。您可以将边距设置为0，例如：

h1 {
  margin: 0;
}

Answer 4

增加保证金：0;和行高：标签的90％。

body {
    background-color: #ffffff;
}
.container {
    margin: 0 auto;
    max-width: 48rem;
    width: 90%;
}
/***** header *****/
 header {
    background-color: #A2CEDD;
}
h1 {
    margin:0;
    font: 7rem Champagne and Limousines, sans-serif;
    line-height: 90%;
    color: #00668C;
}

Answer 5

删除所有空格尝试

body {
    background-color: #307189;
    margin: 0px;padding: 0px; /*add*/
}
.container {
    margin: 0 auto;
    max-width: 48rem;
    width: 90%;
}
/***** header *****/
 header {
    background-color: #A2CEDD;
}
h1 {
    font: 7rem Champagne and Limousines, sans-serif;
    color: #00668C;
    margin: 0px;padding: 0px; /*add*/
}

http://jsfiddle.net/alemarch/f0hdqcgu/19/

基本的CSS问题，页面顶部的间距

5 个答案: