盒子模型之元素CSS margin属性

1.1概述

CSSmargin外边距/外补白边距样式属性，设置对象四边的外延边距，没有背景颜色也无颜色，即设置对象标签之间距离间隔。

1.2margin语法

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.4cssmargin缩写简写

margin属性CSS样式，如遇到上下、左右、上下左右等情况可以优化。

1、只有上下情况缩写

原始：margin-top:5px;margin-bottom:6px

缩写简写为：margin:5px06px0或margin:5pxauto6pxauto

2、只有左右情况缩写

原始：margin-left:5px;margin-right:6px

缩写简写为：margin:06px05px或margin:auto6pxauto5px

3、只有三边情况缩写

原始：margin-top:5px;margin-bottom:6px;margin-left:4px

缩写：margin:5px06px4px或margin:5pxauto6px4px

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:5px8px6px7px;（上、右、下、左）

6、四边其中上下值和左右值各相同缩写

原始：margin-top:5px;margin-bottom:5px;margin-left:7px;margin-right:7px

缩写：margin:5px7px;

1.5设置DIV盒子之间间距

1、设置对象的上下间距。

.div-a{

margin:10px0;/*设置“div-a”对象上下间距为10px,左右为0*/

}

2、设置对象左右距离。

.div-b{

margin:08px;/*设置“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.6margin的叠加

两个或更多个垂直边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。

一般来说，垂直外边距叠加有三种情况：

元素自身叠加。当元素没有内容（即空元素）、内边距、边框时，它的上下边距就相遇了，即会产生叠加（垂直方向）。当为元素添加内容、内边距、边框任何一项，就会取消叠加。

相邻元素叠加。相邻的两个元素，如果它们的上下边距相遇，即会产生叠加。

包含（父子）元素叠加。包含元素的外边距隔着父元素的内边距和边框，当这两项都不存在的时候，父子元素垂直外边距相邻，产生叠加。添加任何一项即会取消叠加。

注意：只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。