我的页面有问题,它使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>
答案 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>