CSS 5.3 框模型-内边距和外边距

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.外边距合并，当两个竖直方向的外边距挨着时，会合并成一个，合并后尺寸为大的外边距尺寸。

当浮动后的水平方向，两个外边距不合并。

解决第二种外边距塌陷问题的方法：

为父元素添加overflow：hidden