margin外边距合并问题

margin属性：

所有浏览器都支持 margin 属性。这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度，也可以分别设置个边的外边距。margin是一个复合属性，包括：margin-top、margin-bottom、margin-left、margin-right

基本使用：

例如：margin：10px 20px 40px 30px;----表示：上/右/下/左外边的大小分别是10、20、40、30

margin：10px 20px 40px ;----表示：上/左右/下,上、右、下、左外边的大小分别是10、20、40、20

margin： 20px 30px;----表示：上下/左右，上、右、下、左外边的大小分别是20、30、20、30

margin：10px
;----表示：上、右、下、左外边的大小都是10。

合并问题：

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

块级元素的垂直相邻外边距会合并：出现合并的情况只有一种设置：上面的块级元素设置margin-bottom；下面的块级元素设置margin-top。两个的属性值可正可负。

case1：当两个属性值均为正值或者均为负值时，取绝对值较大的那个数值。若最终结果为正值，那这两个块级元素之间有空隙；若最终结果为负值，那这两个块级元素之间出现覆盖，下面的会覆盖上面的，覆盖距离为最终结果的绝对值大小。

case2：当两个属性值有正有负时，取两个属性值之和，作为最终的结果。若最终结果为正值，那这两个块级元素之间有空隙；若最终结果为负值，那这两个块级元素之间出现覆盖，下面的会覆盖上面的，覆盖距离为最终结果的绝对值大小。

html代码：

<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
</div>

例1：两个属性值均为正值，

.box1{
background:#26a9f9;
margin-bottom: 30px;
}
.box2{
background:#ff4ef8;
margin-top:20px;
}

结果为：30px


例2：两个属性值均为负值，

.box1{
background:#26a9f9;
margin-bottom: -30px;
}
.box2{
background:#ff4ef8;
margin-top:-20px;
}

结果为：-30px,上面的被覆盖



例2：两个属性值一正一负，case1：

.box1{
background:#26a9f9;
margin-bottom: 30px;
}
.box2{
background:#ff4ef8;
margin-top:-20px;
}

结果为：10px,也就是两个div之间有10px的间隙。



例2：两个属性值两个属性值一正一负，case2：

.box1{
background:#26a9f9;
margin-bottom: -30px;
}
.box2{
background:#ff4ef8;
margin-top:20px;
}

结果为：-10px,上面的被覆盖10px的高度。



二：设置margin-top时，父级元素加border和不加border的效果。注意：父级元素加border和父级元素设置float的效果是一样的。

html代码：

<div class="box">
<div class="box1">1</div>
</div>

css样式：

.box1{
width:100px;
height:100px;
background:#26a9f9;
margin-top:40px;
margin-left:20px;
}

case1：父级元素不加border



case2：父级元素加border（或者浮动）效果图：



我在学习的过程中，一开始并没有总结过margin的使用过程中要注意的事项。只是会用而已。突然被问起这个，有点蒙蔽的赶脚，今天总结了一下，希望对以后初学者有帮助，也是对自己的警示。学习的过程中，学会和善于总结是多么的重要。先写到这，后续有内容会继续更新的。加油！