html - 为什么底部有空隙，padding/margin 无缘无故

Question

我不明白为什么文本不会与 div 的中间对齐，我认为这是导致页面底部出现空白的原因，我希望文本位于中间(高度)页脚的(两个 div 我都有两个强制文本的每个部分到页面的边缘)

HTML:

 <div class="yellowfooterbackground">

 <div class="yellowfootercontent">

 <div class="yellowfootercontentleft">


 <p>IPS Fire & Security is a trading name of IPS Facilities - <u><a href="Terms-And-Conditions.html">Terms & Conditions</a></u></p>  

 </div>

 <div class="yellowfootercontentright">

 <p> Web Design & SEO by Raven </p>

 </div>
</div>
</div>

CSS:

  .yellowfootercontent {
height: 30px;
width: 950px;
margin-right: auto;
margin-left: auto;  
font-family: 'Open Sans', Arial, sans-serif;
font-size:12px;


}

  .yellowfootercontentleft {
height: 30px;
width: 475px;
float: left;
text-align: left;


 }

 .yellowfootercontentright {
height: 30px;
width: 475px;
text-align: right;
float: right;
 }

Answer 1

试试这个:

.yellowfooterbackground {
margin-top:-12px;
width:100%;
height:30px;
background-color:#ffd602;
padding-bottom:12px;
}

 .yellowfootercontent {
height: 30px;
width: 950px;
margin-right: auto;
margin-left: auto;  
font-family: 'Open Sans', Arial, sans-serif;
font-size:12px;
line-height:40px;
}

.yellowfootercontentleft {
height: 30px;
width: 475px;
float: left;
text-align: left;
}

.yellowfootercontentright {
height: 30px;
width: 475px;
text-align: right;
float: right;
line-height:42px;
}

我添加了一些行高属性。我不确定这是最聪明的方法，但不知何故，它解决了问题。参见 JsFiddle