margin属性

1.嵌套盒元素受margin-top影响

CSS2.1的盒模型中规定的内容——Collapsing margins：

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

问题：父级元素和子级元素的受margin-top相互影响，造成子级或父级margin-top值应用不上

：相邻元素相互margin-bottom和margin-top相互影响

：子级元素本身的margin-bottom和margin-top相互影响

解决办法：

1.设置padding或border，有内容内联也不会受影响。

2.浮动float，或者使用绝对定位position：absolute。

3.overflow：hidden/auto.

4.display:inline-block/table-cell。但用table-cell会使父元素margin-top失效

5.谷歌内核下可以用-webkit-margin-collapse控制margin重叠。属性有三种：collapse重叠（默认属性）discard（取消margin属性）separate（应用margin不重叠）。

2.margin会影像可视区域

条件：若不设置盒元素的宽高，并且没浮动和和绝对定位等属性。

结果：margin会影响水平方向可视区，但垂直方向只会改变其位置。

3.margin百分比设定

1.当元素不是绝对定位时：margin不管垂直方向还是水平方向，都是根据其父级宽度设定其尺寸的。

2.当元素是绝对定位时：margin是根据离它最近的定位祖先元素宽度设定其尺寸的。

4.margin-auto

特性：margin-auto会制动分配元素剩余尺寸

例：div未设置宽度，则会自动占满页面宽度。若加了宽度限制，剩余空间margin-auto会自动分配。

注意：若div未设置高度时，高度是根据内容自动扩充的，所以margin-auto会使水平居中，但不会水平居中

：若img标签设置margin-0 auto是不会水平居中的，是因为img不是是lnline元素，若想居中需用

display：block限制。

5.margin-start/margin-end

特性：margin-start和margin-end，根据文本流方向定位

例：若正常文本流从上到下从左到右，margin-start等于margin-left，margin-end等于margin-right。若改变文本流向从右向左，则margin-start等于margin-right，margin-end等于margin-left。相对应还有margin-before和

margin-after，但这两个元素支持不太好。