html - 为什么我的话不留在我的 div 中

Question

我为我正在做的网站创建了一个标题，但文字不会留在其中，它们会在它下面。请帮忙。继承人的代码:

#headerclasshomenofix{
	background-color:white;
	width:100%;
	height:40px;
	left:0px;
	top:0px;
	position:absolute;
	font-family:"AR CENA";
	border-bottom:thick gray solid;
}

<div id="headerclasshomenofix">
		<h1><i>Music School</i></h1>
</div>

看看“音乐学院”三个字怎么飘下来。。我也不知道自己哪里做错了。

Answer 1

默认情况下，h1 等许多标签在某些属性上具有默认值，例如 Chrome 上的 h1:

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

因此你只需要重置默认的 margin

#headerclasshomenofix {
  background-color: white;
  width: 100%;
  height: 40px;
  left: 0px;
  top: 0px;
  position: absolute;
  font-family: "AR CENA";
  border-bottom: thick gray solid;
}
h1 {
  margin: 0
}

<div id="headerclasshomenofix" style="left: 0px; top: 0px">
  <h1><i>Music School</i></h1>
</div>