在h1标题之上的差距

Question

我想设置一个类似于android工具栏的工具栏。 首先我定义了一个标题：

html,
body {
  height: 100%;
  margin: 0;
  background-color: #E5E5E5;
  font-family: 'RobotoDraft', 'sans-serif';
}
header {
  background: #FF0000;
  height: 50px;
  width: 100%;
  margin: 0;
  padding: 0;
}
h1 {
  color: black;
  text-align: center;
  margin-top: 10px;
  margin-bot: 10px;
  font-size: 30px;
}

<header>
  <h1>Home</h1>
</header>

我现在不明白的是标​​题顶部的小差距：

我将填充和边距设置为零。那么为什么我会在标题的顶部出现这个差距呢？

Answer 1

由于<h1>标记的上边距，因此会创建标题顶部的差距。

这称为collapsing margins。您可以在此处查看禁用它的方法：How to disable margin-collapsing?。

例如，在父overflow:hidden;元素上设置<header>：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  background-color: #E5E5E5;
  font-family: 'RobotoDraft', 'sans-serif';
}
header {
  background: #FF0000;
  height: 50px;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
h1 {
  color: black;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 30px;
}

＆＃13;

<header>
  <h1>Home</h1>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

那是您margin上的h1。

将您的margin更改为padding：

DEMO

h1 {
    padding: 10px 0;
    margin: 0;
}

Answer 3

你的h1选择器有一个余量。

这就是引起它的路线：

margin-top: 10px;

查看此Demo

Answer 4

由于h1中的header有margin-top: 10px，因此存在差距。将它设置为0px，差距将不再出现。

另外，作为附注，margin-bot不是有效的css属性。这是margin-bottom。

＆＃13;

＆＃13;

html,
body {
    height: 100%;
    margin: 0;
    background-color: #E5E5E5;
    font-family: 'RobotoDraft', 'sans-serif';
}

header {
    background: #FF0000;
    height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
}


h1 {
    color: black;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 30px;
}

＆＃13;

<header>
    <h1>Home</h1>
</header>

＆＃13;

＆＃13;

＆＃13;