margin的特性及Bug分析

margin是盒子模型中的外边距，在很多地方都会用到这个属性。对于margin相关的东西做了一些总结

目录

特性总结

margin的auto值的应用

margin的Bug分析

特性总结

1.不属于盒子的组成部分，不会影响盒子的尺寸设置。

2.在元素周围生成额外的空白区，这个空白区永远都是透明的。

3.主要用于控制盒子与盒子之间的间距，以及盒子在页面中的占位。

4.对inline元素，垂直margin无效（受到行间限制）

5.对table类显示模式的内部元素无效（受到外围元素限制）

      如：tr、td元素，display为table-cell或者table-row

6.元素默认margin值为0，但部分元素默认带有一定得margin

     默认有margin的元素如：body、标题标签、p、dl，大多数以呈现内容相关的标签（块状标签）会有默认的margin

7.可以设置数值，也可以设置为百分比，允许负值。

     值为百分比的时候，无论是宽度还是高度，都以父级对象的width为参考基准（基于高度自适应的特性）

margin的auto值的应用

所谓占位空间：black元素默认独占一行特性说明其存在就带有默认的占位空间，这个空间默认为水平方向。

auto的原理：让浏览器自动分配占位空间的剩余空间。

auto值的应用

1.固定宽度的1列自适应居中布局：margin：0 auto  实现水平居中

.box1{
	margin:0 auto;
}

2.模块水平方向右侧定位：margin-left左侧auto自动判断，margin-right右侧定位值

.box2{
	margin-right:20px;
	margin-left:auto;
}

3.水平垂直居中模块：position定位（top、left、right、bottom四值为0创建占位剩余空间，利用margin:auto来分配剩余空间）。

.box3{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

margin的Bug分析

垂直方向的margin合并Bug

当垂直方向的两个盒子，上面盒子有下外边距，下面盒子有上外边距，就会发生margin合并现象。

垂直margin的合并原理：当两个垂直margin相遇时，它们将合并成1个margin，合并后的margin值高度等于发生合并的margin中的较大值。

较大值：
       1.正值取大（ex：100px vs 100px---》100px）
       2.正负值取和（ex：100px vs -50px---》50px）
       3.负值取大（ex：-100px vs -50px---》 -100px）

应用范围：
    1.使用于默认文档流中的元素（浮动及定位元素除外）。
    2.不仅使用于2个同级元素，也适用于嵌套元素及元素自身。

margin重叠合并-嵌套元素解决方法：
       1.能用padding就不用margin
       2.使用border或padding隔开
margin重叠合并-元素自身解决方法
       1.没事别这么玩。
       2.不让容器空或者加隔断内容。

另外，margin合并的bug可以给元素加上BFC模式就可以解决，主要还是看自己需求。

主页传送门