Question

这是我的HTML页面的jsfiddle link，它清楚地表明标题和内容div之间以及内容和页脚div之间存在空格。造成这种情况的原因是，如何删除它。我应该在CSS中做些什么改变？

如果我在内容div中执行margin-top：-50px，那么它会触及标题div的底部？但这似乎更像是一个黑客，这不适用于页脚？此外，我不喜欢这种方法。

CSS

 html{
   font-size:100%;
   margin:0;
   padding:0;
   min-height: 100%;
   position: relative;
 }
 body{
   margin:0;
   padding:0;
 }
 #header{
   background-color:#007FFF;
   width : 100%;
   height:130px;
 }
 #content{
   background-color:#B0E2FF;
   margin-bottom:0px;
   margin-top:0px;
 }
 #footer{
   background-color:#B0E2FF;
   position: absolute;
   left:0;
   bottom: 0;
   height: 90px;
   width: 100%;
   overflow:hidden;    
 }
 h1 {
   font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
   padding: 0.5em 0 0 0;
   text-align: center;
   margin: 0;
   color: #e7ce00;
}   

h2 {
   font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
   padding: 0.5em 0 0 0;
   text-align: center;
   margin: 0;
   color: #e7ce00;
}

#wrapper{
   width:60%;
   margin:0 auto;
   background-color: red;
}

.scrollabletextbox{
   width:900px;
   height:120px;
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
   border:3px solid #00008B;
   background-color:#E6E8FA;
}

#querytextarea{
  float: left;
}

button{
  float: right;
}

form:{
  width:90%;
  margin:0 auto;
}

HTML

<body>
    <div id="header">
        <h2>Console</h2>
       <h1>Query</h1>
    </div>
    <div id="content">
     <div id="wrapper">
       <form>
          <h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
          <textarea id = "querytextarea" class="scrollabletextbox" name="MongoQuery" rows="20" cols="30"></textarea><br>
           <button type="submit" form="form1" value="Submit">Submit</button>
           <br>
          <h3 style="margin-bottom:1px;margin-top:10px; color:##22316C">Result</h3>
          <textarea class="scrollabletextbox" name="Result"  rows="20" cols="30"></textarea>
       </form>
      </div> 
    </div>
    <div id="footer">
    </div>
 </body>

Answer 1

您可以与margin-top

交换h3内的#content padding-top

#content {
    h3 {
        margin: 0;
        padding-top: 50px;
    }
}

考虑使用类来设置样式而不是id。

Answer 2

从h3删除上边距

<h3 style="margin-bottom:1px;margin-top:0px; color:#22316C">Mongo Query</h3>

和

如果您还希望在内容之后添加页脚，请从css。
下面删除bottom：0
#footer{ background-color:#B0E2FF; position: absolute; left:0; bottom: 0; height: 90px; width: 100%; overflow:hidden; }

标题div不会出现在内容div

2 个答案: