Question

我尝试在页面顶部使用以<h2>元素为中心（水平和垂直）的div。

HTML

<div id="header"><h2>The header</h2></div>

CSS

body{
    margin:0;
    padding:0;
}
#header{
    width:100%;
    height:100px;
    background-color: #9C27B0;
    line-height: 100px;
    text-align: center;
}

我得到的奇怪效果是div的顶部和窗口的上边缘之间有一个空格。

如果我只在div中写入文本（没有h2标签），则不会出现此类问题。但是，我找不到任何来源解释为什么行高和<h>标签会产生奇怪的结果。

Answer 1

标题（从h1到h6）默认为margin，因此在这种情况下只需重置h2：

＆＃13;

body {
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  height: 100px;
  background-color: #9C27B0;
  line-height: 100px;
  text-align: center;
}
h2 {
  margin: 0
}

＆＃13;

<div id="header">
  <h2>The header</h2>
</div>

＆＃13;

Answer 2

标题都有默认的边距/填充。您可以通过应用此代码删除它们。

<强> CSS

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

使用line-height和<h2>元素时div上方的奇怪空间

2 个答案: