CSS外边距叠加问题

最新推荐文章于 2023-04-29 01:43:06 发布

guo-snowstorm

最新推荐文章于 2023-04-29 01:43:06 发布

阅读量408

点赞数

分类专栏： CSS 文章标签： css margin

CSS 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

转自：http://www.cnblogs.com/winter-cn/archive/2012/11/16/2772562.html

读过李松峰老师翻译的新书中《CSS设计师指南（第3版》的外边距叠加部分( http://www.ituring.com.cn/article/16969)实在是有些捉急啊，这地方实在是有些没写到位，也有错误（如“叠加的只是垂直外边距，水平外边距不叠加”）

margin collapsing现象

BFC（block formatting context）中相邻的两个block-level的盒，上一个box的下边距会跟下一个box的上边距发生叠加，即两者取最大的，而不是相加：

<!doctype HTML>
<html>
<head>
<style type="text/css">

    #green {
        margin:10px 10px 10px 10px
    }
    #blue {
        margin:10px 10px 10px 10px
    }
    #red {
        margin:10px 10px 10px 10px
    }

</style>
</head>
<body>

<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>

</body>
</html>

margin collapsing与方向无关

《CSS设计师指南（第3版》中讲到“叠加的只是垂直外边距，水平外边距不叠加”，这个说法是错误的，叠加与否完全取决于两个box是否是位于同一BFC的两个相邻box，与水平垂直无关，下面例子中，更改了body的writing-mode，于是叠加发生在了水平方向（仅ie可看）

<!doctype HTML>
<html>
<head>
<style type="text/css">

    #green {
        margin:10px 10px 10px 10px
    }
    #blue {
        margin:10px 10px 10px 10px
    }
    #red {
        margin:10px 10px 10px 10px
    }
    body {
        writing-mode:tb-rl;
    }

</style>
</head>
<body>

<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>

</body>
</html>

margin collapsing仅仅发生在BFC

margin collapsing不发生在IFC

当把元素的display属性设为inline-block，它们都位于IFC当中，所以不论水平还是竖直方向，都不会发生叠加：

<!doctype HTML>
<html>
<head>
<style type="text/css">

    #green {
        margin:10px 10px 10px 10px;
        display:inline-block;
    }
    #blue {
        margin:10px 10px 10px 10px;
        display:inline-block; 
    }
    #red {
        margin:10px 10px 10px 10px;
        display:inline-block;
    }
  
</style>
</head>
<body>
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;"></div><br/><div id="red" style="background:pink;height:100px;width:100px;"></div>
</body>
</html>

margin collapsing不发生在floats

当把元素的float属性设为left，它们都不在正常流中，更不在BFC中了，同样不论水平还是竖直方向，都不会发生叠加：

<!doctype HTML>
<html>
<head>
<style type="text/css">

    #green {
        margin:10px 10px 10px 10px;
        float:left;
    }
    #blue {
        margin:10px 10px 10px 10px;
        float:left; 
    }
    #red {
        margin:10px 10px 10px 10px;
        clear:left;
        float:left;
    }
  
</style>
</head>
<body>

<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>

<div id="red" style="background:pink;height:100px;width:100px;"></div>

</body>
</html>

margin collapsing可能跨元素

当一个容器既没有border又没有padding时，它的第一个子box的的margin也能跟它的上一个容器的margin发生叠加：

<!doctype HTML>
<html>
<head>
<style type="text/css">

    #green {
        margin:10px 10px 10px 10px;
    }
    #blue {
        margin:5px 10px 10px 10px;
    }
    #red {
        margin:10px 10px 10px 10px;
    }
  
</style>
</head>
<body>

<div id="green" style="background:lightgreen;height:100px;width:100px;">
</div>
<div id="blue" style="background:lightblue;height:100px;width:100px;">
    <div id="red" style="background:pink;height:100px;width:100px;"></div>
</div>

</body>
</html>

margin collapsing不能跟padding(内边距)折叠

有padding(内边距)的时候，上一节的情况不发生：

<!doctype HTML>
<html>
<head>
<style type="text/css">

    #green {
        margin:10px 10px 10px 10px;
    }
    #blue {
        margin:10px 10px 10px 10px;
        padding:10px 10px 10px 10px;
    }
    #red {
        margin:10px 10px 10px 10px;
    }
  
</style>
</head>
<body>

<div id="green" style="background:lightgreen;height:100px;width:100px;">
</div>
<div id="blue" style="background:lightblue;height:100px;width:100px;">
    <div id="red" style="background:pink;height:100px;width:100px;"></div>
</div>

</body>
</html>

margin collapsing不能跟跨越BFC

当一个容器在其内部创建新的BFC时，跨元素折叠的情况也不会发生。

<!doctype HTML>
<html>
<head>
<style type="text/css">

    #green {
        margin:10px 10px 10px 10px;
    }
    #blue {
        margin:10px 10px 10px 10px;
        overflow:hidden;
    }
    #red {
        margin:10px 10px 10px 10px;
    }
  
</style>
</head>
<body>

<div id="green" style="background:lightgreen;height:100px;width:100px;">
</div>
<div id="blue" style="background:lightblue;height:100px;width:100px;">
    <div id="red" style="background:pink;height:100px;width:100px;"></div>
</div>

</body>

guo-snowstorm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS外边距叠加问题

转自：http://www.cnblogs.com/winter-cn/archive/2012/11/16/2772562.html读过李松峰老师翻译的新书中《CSS设计师指南（第3版》的外边距叠加部分( http://www.ituring.com.cn/article/16969)实在是有些捉急啊，这地方实在是有些没写到位，也有错误（如“叠加的只是垂直外边距，水平外边距不叠加”）
复制链接

扫一扫