CSS margin-bottom属性，下外边距

margin-bottom属性

CSS中的margin-bottom属性可以用来单独设置HTML元素的下外边距，允许负值的情况。比如下面的这个实例，将第一个div元素的下边距设置为10%：

<div class='b1'>
  
</div>
<div class='b2'></div>

<style>
  .b1{border:1px solid skyblue;width:100%;height:20%;margin-bottom:10%;}
  .b2{background-color:orange;width:100%;height:20%}
</style>

margin-bottom“不起作用”的情况

margin-bottom可能有不起作用的情况，比如在div元素之内的其子元素设置下外边距，比如下面这个实例：

<div class='mb1'>
  <div class='mb2'></div>
</div>


<style>
  .mb1{border:1px solid skyblue;width:100%;height:30%;}
  .mb2{width:100%;margin-bottom:10%;height:60%;background-color:orange;}
</style>

解决的方法

首先应当确定的一点是margin-bottom是设置下外边距的属性，并不是为HTML元素进行定位的属性。如果要设置某一个元素距离其父元素下边框的距离，可以为其父元素设置padding-bottom的属性。比如下面的实例：

<div class='pb1'>
  <div class='pb2'></div>
</div>


<style>
  .pb1{border:1px solid skyblue;width:100%;height:20%;padding-bottom:10%;}
  .pb2{width:100%;height:100%;background-color:orange;}
</style>

hot：热门