CSS 5.3 框模型-内边距和外边距
1.内边距:padding(填充,内边距)
可能的值:数值或百分比,默认值0
注:百分比是相对于其父元素的 width计算的,这一点与外边距一样。所以,如果父元素的width改变,它们也会改变。
例如:
①padding:5px(上)2cm(右)1em(下)10%(左);//顺时针
②padding:5px(上)2cm(右 左)1em(下);
③padding:5px(上 下)2cm(右 左);
④padding:5px(上 下 右 左);
单边内边距属性:
上边:padding-top百分比是相对于其父元素的 width计算的
右边:padding-right百分比是相对于其父元素的 width计算的
下边:padding-bottom百分比是相对于其父元素的 width计算的
左边:padding-left百分比是相对于其父元素的 width计算的
2.外边距:margin(边缘,外边距)
可能的值:数值或百分比,默认值0
注:百分比是相对于其父元素的 width计算的,这一点与内边距一样。所以,如果父元素的width改变,它们也会改变。
例如:
①margin:5px(上)2cm(右)1em(下)10%(左);//顺时针
②margin:5px(上)2cm(右 左)1em(下);
③margin:5px(上 下)2cm(右 左);
④margin:5px(上 下 右 左);
单边外边距属性:
上边:margin-top 百分比是相对于其父元素的 height计算的
右边:margin-right 百分比是相对于其父元素的 height 计算的
下边:margin-bottom 百分比是相对于其父元素的 width 计算的
左边:margin-left 百分比是相对于其父元素的 height 计算的
3.外边距合并,当两个竖直方向的外边距挨着时,会合并成一个,合并后尺寸为大的外边距尺寸。
当浮动后的水平方向,两个外边距不合并。
作用:以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。