元素外边距合并探讨

作者: 该帐号已被查封_才怪 | 来源:发表于2016-07-13 11:16 被阅读47次

元素外边距合并探讨
任务11
第十一弹-inline-block、BFC、边距合并
Learn HTML&CSS the hard way
BLOCK、BFC、边距合并,鼠标悬浮菜单出现
边距合并、BFC、清除浮动
inline-block、BFC、边距合并
浮动
inline-block、BFC、边距合并
任务11-inline-block、BFC、边距合并

一、在常规文档流中，当两个块级元素上下放置时（没有嵌套关系）

详见本人的这篇文章第一部分

二、在常规文档流中，当两个块级元素上下放置有嵌套关系时

a、若父元素有边框，内边距或填充时，则被嵌套的块级元素不会与嵌套的块级元素外边距折叠；

详见本人的这篇文章第一部分

b、若外面的元素无边框，内边距或填充与子元素隔开时则折叠；

详见本人的这篇文章第一部分

解决办法：
1、在div1父层加上：overflow:hidden；
2、把margin-top外边距改成padding-top内边距；
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
div1加： padding-top: 1px; /* 或 border-top: 1px solid red; /
4、让父元素生成一个 block formating context，以下属性可以实现
* float: left/right
* position: absolute
* display: inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
div加：position: absolute; / 或其他可生成 block formating context 的属性 */

三、在正常文档流中，两个内联元素并列排布时，合并后的外边距等于两元素的外边距之和。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
        font-size: 0px;
    }
/*    body{
        position: absolute;
        float: none;
    }*/

    a{
        border: 2px solid red;
        margin: 10px;
        padding: 5px;

        font-size: 20px;
    }
/*    img{
        border: 2px solid red;
        margin: 30px;
        padding: 15px;
    }*/

    </style>


</head>
<body>
    <a href="www.w3school.com.cn" class="">我是下联元素a标签</a>
    <a href="www.w3school.com.cn" class="">我是下联元素a标签</a>
<!--    ![完整的网站技术参考手册](http:https://img.haomeiwen.com/i2166980/9309387f50b05fff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) -->



</body>
</html>

注：上述代码中在body中加入了font-size:0px; 才使得合并的两个内联元素的外边距正好为他们合并前的外边距之和，若不加，则不等于；

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *