时间戳

首页 > 解决方案 > 标题 1 导致 DIV 分开

html - 标题 1 导致 DIV 分开

问题描述

我的页面有问题，它在 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>

标签： htmlcss

解决方案

设置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>

推荐阅读