码迷,mamicode.com
首页 > 其他好文 > 详细

margin 碰到过的重叠问题

时间:2016-12-28 20:03:24      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:ges   class   code   htc   order   border   image   设置   img   

双倍margin

稍微记录一下,因为常忘

float + margin,实际边距会变成设置值的双倍。

解决办法是 将元素设为 display:inline

最好要了解 IE的 haslayout 问题

 

垂直方向的margin重叠

以前一直知道 相邻的两个块元素 在垂直方向margin重叠问题。

但是没有考虑过 父元素和 第一个子元素的重叠情况

代码如下:

        <div class="wrap">
            <div class="one">margin 20px</div>
            <div class="two">margin 20px</div>
        </div>

        <div class="wrap2">margin-top 50px 测试跟wrap的距离</div>
    .wrap {
        margin: 0;
        background-color: lightcoral;

        .one {
            margin: 20px;
            background-color: lightblue;
        }

        .two {
            margin: 20px;
            background-color: lightgreen;
        }
    }

    .wrap2 {
        margin-top:50px;
        background-color:lightgoldenrodyellow;
        height:200px;
    }

 

技术分享

 

 

如果 wrap 包含块没有设置padding或border的话,wrap块的外边距会跟子元素重叠。

添加了border的效果如下。

技术分享

 

margin 碰到过的重叠问题

标签:ges   class   code   htc   order   border   image   设置   img   

原文地址:http://www.cnblogs.com/yoxiniao/p/6230152.html

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