CSS深入理解之margin

 

 

 

前言

 

改变容器尺寸

 

margin改变容器尺寸有以下两个限制条件:

1. 使用于没有设置宽高的普通block元素
   float/absolute/fixed元素 以及 inlines水平 table-cell元素.

2. 只试用于水平方向

 

margin百分比

 

1.普通元素的百分比margin值是相对于容器宽度计算的
2.绝对定位元素的百分比margin值是相对于第一个定位祖先元素的宽度计算

 

也就是说margin的宽度都是相对于其祖先元素计算的.

 

margin重叠

 

1.block水平元素(不包括float和absolute)
2.只发生在垂直方向(如果修改了writting-mode)

 

父子元素margin重叠条件

1. 父元素非块状格式化上下文元素

2. 父元素没有border值;

3. 父元素没有padding值;

4. 父元素与第一个子元素之间没有inline父元素分隔

5. 父元素没有高度限制

 

我们可以通过设置;(添加overflow:hidden).设置border/padding/添加一个inline元素/添加高度等方法来解决margin重叠的问题;

 

margin重叠的规则,简而言之就是取两个值的和

 

margin auto属性

 

有时候,就算没有给元素设置宽高,他也会自动填满容器,那么如果我们设置宽高以及margin:auto后,就可以有自动margin填充了
图片是默认inlie的,所以不会自动居中,需要修改它的block值;
垂直居中 绝对定位元素在拉伸的情况下,设置一个宽高度,然后margin :auto,那么就可以实现自动居中了,也就是时候margin填充了拉伸后这只宽高留下的空白.

 

margin 无效的情形

 

1.inline水平元素垂直margin无效
2.display:table-cell/table-row等声明的margin无效