盒子模型之元素CSS margin属性

盒子模型之元素CSS margin属性

1.1 概述
    CSS margin外边距/外补白边距样式属性，设置对象四边的外延边距，没有背景颜色也无颜色，即设置对象标签之间距离间隔。
1.2 margin语法
margin的值
可以为正整数和负整数+html单位；
可以为auto自动属性(自动、自适应)；
可以为百分比（%）值。
例：
div{
margin:10px; //设置div对象四边间距为10px
margin-left:auto；
margin-left:3%；
}
1.3单独设置四边间距属性
margin-left，对象左边外延边距。
margin-right，对象右边外延边距。
margin-top，对象上边外延边距。
margin-bottom，对象下边外延边距。
1.4 css margin缩写简写
margin属性CSS样式，如遇到上下、左右、上下左右等情况可以优化。
1、只有上下情况缩写
原始：margin-top:5px; margin-bottom:6px
缩写简写为：margin:5px 0 6px 0或margin:5px auto 6px auto
2、只有左右情况缩写
原始：margin-left:5px; margin-right:6px
缩写简写为：margin:0 6px 0 5px或margin:auto 6px auto 5px
3、只有三边情况缩写
原始：margin-top:5px; margin-bottom:6px; margin-left:4px
缩写：margin:5px 0 6px 4px或margin:5px auto 6px 4px
4、四边相同值缩写
原始：margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px
缩写：margin:5px;
5、四边不同值缩写
原始：margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px
缩写：margin:5px 8px 6px 7px;（上、右、下、左）
6、四边其中上下值和左右值各相同缩写
原始：margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px
缩写：margin:5px 7px;
1.5设置DIV盒子之间间距
1、设置对象的上下间距。
.div-a{
margin:10px 0;/*设置“div-a”对象上下间距为10px,左右为0*/
}
2、设置对象左右距离。
.div-b{
margin:0 8px;/*设置“div-b”对象上下间距为0,左右为8px*/
}
3、设置DIV盒子与上方相邻间距。
.div-c{
margin-top:10px;/*设置“div-c”对象与上方相邻间距为10px*/
}
4、设置DIV盒子与下方相邻距离。
.div-d{
margin-bottom:10px;/* 设置“div-d”对象与下方相邻间距为10px*/
}
5、设置DIV盒子与左方相邻间距。
.div-e{
margin-left:9px;/*设置“div-e”对象与左侧方相邻间距为9px*/
}
6、设置盒子与右方相邻距离。
.div-f{
margin-right:12px; /*设置“div-f”对象与右方相邻间距为12px*/
}
1.6 margin的叠加
    两个或更多个垂直边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
一般来说， 垂直外边距叠加有三种情况：
     元素自身叠加。当元素没有内容（即空元素）、内边距、边框时，它的上下边距就相遇了， 即会产生叠加（垂直方向）。 当为元素添加内容、 内边距、 边框任何一项， 就会取消叠加。
     相邻元素叠加。相邻的两个元素， 如果它们的上下边距相遇，即会产生叠加。
     包含（父子）元素叠加。包含元素的外边距隔着父元素的内边距和边框，当这两项都不存在的时候，父子元素垂直外边距相邻，产生叠加。添加任何一项即会取消叠加。
注意：只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。