标题1导致DIV分开

时间:2018-07-29 17:35:27

标签: html css

我的页面有问题,它使H1和主页DIV部分之间出现了间隙。 2小时后,我似乎无法修复它。任何人都可以告诉它出了什么问题。我希望顶部横幅和#mainarea彼此重叠。目前两者之间有一个小差距。

body {
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
  background-color: #f6f6f6;
  padding: 0;
  margin: 0;
  border: 0;
}

#logo {
  width: 100%;
  height: 50px;
  background-color: #000;
}

#mainarea {
  width: 60%;
  height: auto;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  background-color: #E70A0E;
  height: 250px;
}

h1 {
  font-size: 1.5em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: bolder;
  font-style: normal;
  padding-left: 15px;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
  <h1>This is a test </h1>
</div>

1 个答案:

答案 0 :(得分:-1)

overflow:auto;中设置#mainarea并将margin:auto添加到h1标签。
看,将div放入div时会发生什么:https://stackoverflow.com/a/8529773/9947640

body {
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
  background-color: #f6f6f6;
  padding: 0;
  margin: 0;
  border: 0;
}

#logo {
  width: 100%;
  height: 50px;
  background-color: #000;
}

#mainarea {
  width: 60%;
  height: auto;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  background-color: #E70A0E;
  height: 250px;
  overflow:auto;
}

h1 {
  font-size: 1.5em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: bolder;
  font-style: normal;
  padding-left: 15px;
  margin:auto;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
  <h1>This is a test </h1>
</div>