码迷,mamicode.com
首页 > Web开发 > 详细

CSS中外边距重叠的问题

时间:2017-04-05 09:58:54      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:ack   --   color   边框   20px   code   back   class   合并   

相邻的两个或多个外边距会合并成一个外边距,当同为正的,取最大的外边距,当有正负时,取最小的外边距加上最大的外边距,这里的相邻指的是外边距的相邻:

<div style="width:100px;height:100px;background-color:red;margin-bottom:20px;border:1px solid red"></div>
    <div style="width:100px;height:100px;background-color:yellow;margin-top:10px"></div>
  <!-- 外边距合并 --> <br><br> <div style="border:1px solid red;width:100px"> <div style="margin-top:50px;background-color:green;height:50px;width:50px"> <div style="margin-top:100px">B</div> </div> </div>
<!-- 外边距合并 -->
<br><br> <div style="border:1px solid red;width:100px"> 
       <div style="margin-top:50px;border:1px solid blue;background-color:green;height:50px;width:50px">
        <div style="margin-top:100px">B</div>
        </div>
       </div><!--  外边距不合并,因为有边框隔开,两个外边距不相邻-->
 <br><br> 
<div style="border:1px solid red;width:100px">
   <div style="margin-top:-50px;background-color:green;height:50px;width:50px">
    <div style="margin-top:100px">B</div>
   </div>
</div><!-- 有负的外边距时,取负值最小的外边距与最大的外边距相加,即公共的外边距 -->

 

CSS中外边距重叠的问题

标签:ack   --   color   边框   20px   code   back   class   合并   

原文地址:http://www.cnblogs.com/YutaoZhou/p/6667100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!