margin使用心得

来源：互联网发布：淘宝上传工具编辑：程序博客网时间：2024/06/18 07:02

众所周知，margin有margin-top,margin-right,margin-bottom,margin-left 4个方向。在显示规则上又分为水平margin(即margin-left和margin-right)和垂直margin(即margin-top和margin-bottom)。

1. 水平margin：不会重叠，外边距会发生累加

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>margin问题</title>    <style type="text/css">        *{            margin: 0;            padding:0;        }        body{            font-size: 0;        }        .div1{            width: 100px;            height: 100px;            display: inline-block;            background-color: orange;            margin-right: 10px;        }        .div2{            width: 100px;            height: 100px;            display: inline-block;            background-color: red;            margin-left: 10px;        }    </style></head><body><div class="div1"></div><div class="div2"></div></body></html>

结果就是两个div之间的间隔成了20px。

2. 垂直margin:会发生重叠，外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

兄弟元素之间的margin

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>margin问题</title>    <style type="text/css">        *{            margin: 0;            padding:0;        }        body{            font-size: 0;        }        .div1{            width: 100px;            height: 100px;            background-color: orange;            margin-bottom: 10px;        }        .div2{            width: 100px;            height: 100px;            background-color: red;            margin-top: 10px;        }    </style></head><body><div class="div1"></div><div class="div2"></div></body></html>

结果就是两个div之间的间隔成了10px，当两个垂直方向上的margin大小不同时，取两者中大的，也就是两个div之间的间隔。

父子之间的margin(一个元素包含另一个元素)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>margin问题</title>    <style type="text/css">        *{            margin: 0;            padding:0;        }        body{            font-size: 0;        }        .div1{            width: 200px;            height: 200px;            background-color: orange;        }        .div2{            width: 100px;            height: 100px;            background-color: red;            margin-top: 40px;        }    </style></head><body><div class="div1">    <div class="div2"></div></div></body></html>

上面的代码会发生什么，正常情况下我们都会觉得div2会离div1的顶端距离40px，然而不是这样的，结果是div1距离body 40px.父元素和子元素的外边距也发生了叠加。

垂直方向外边距合并的计算

1.叠加的margin都是正的，结果为大的那个值

        .div1{            width: 100px;            height: 100px;            background-color: orange;            margin-bottom: 10px;        }        .div2{            width: 100px;            height: 100px;            background-color: red;            margin-top: 20px;        }

这个实际结果是20px。

2.叠加的都是负的，取的是其中绝对值较大的，然后，从 0 位置，负向位移

        .div1{            width: 100px;            height: 100px;            background-color: orange;            margin-bottom: -20px;        }        .div2{            width: 100px;            height: 100px;            background-color: red;            margin-top: -10px;        }

这个实际结果是-20px,div2在原有的位置向上平移20px，即div2与div1重叠了20px。

3.叠加的有正有负,先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

        .div1{            width: 100px;            height: 100px;            background-color: orange;            margin-bottom: 20px;        }        .div2{            width: 100px;            height: 100px;            background-color: red;            margin-top: -10px;        }

这个实际结果是20 +(-10) = 10px。

注意:浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠

比如：

        <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>margin问题</title>    <style type="text/css">        *{            margin: 0;            padding:0;        }        body{            font-size: 0;        }        .box{            width: 100px;        }        .div1{            width: 100px;            height: 100px;            float: left;            background-color: orange;            margin-bottom: 20px;        }        .div2{            width: 100px;            height: 100px;            float: left;            background-color: red;            margin-top: 10px;        }    </style></head><body><div class="box"><div class="div1"></div><div class="div2"></div></div></body></html>

结果是30px，这是浮动换行的结果，其他几种情况很好理解，绝对定位脱离文档流了，inline-block和浮动没换行也是水平间距。

顺便说一句：父子元素嵌套不叠加的办法
当给层内元素设置margin-top时，层内元素并没有margin，而是父层出现了margin-top，这往往让人很迷惑。

解决办法有：
1.给父层添加：overflow:hidden;
2.给父层添加：border除none以外的属性
3.给父层添加：padding-top代替margin-top的效果(实际项目中都是用padding比较多，margin会产生很多问题)

最后说一句，博客难免有疏漏之处，望各位大神多多指教。

0 0