CSS盒子模型-内边距（padding）

html-css033

CSS盒子模型-内边距（padding）,第1张

padding属性用于设置内边距，即边框与内容之间的距离。

值的个数 /表达意思

padding:5px 1个值，代表上下左右都有5像素内边距；

padding:5px 10px 2个值，代表上下内边距是5像素 左右内边距是10像素；

padding:5px 10px 20px3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素；

padding:5px 10px 20px 30px 4个值，上是5像素，右是10像素，下是20像素，左是30像素，顺时针。

以上4种情况，实际开发都会遇到。

给指定盒子添加padding值之后：

1、padding属性是css用于在一个声明中设置所有padding属性的简写属性。

2、Padding属性包含了paddingleft：左补距离(设置距左内边距)。paddingtop：头顶补距离(设置距顶部内边距)。paddingright：右补距离(设置距右内边距)。paddingbottom：底补距离(设置距低内边距)。其二维构建图可见CSS属性二维图。

3、paddingleft用法：padding-left：10px。这个意思距离左边补距10像素，可跟百分比如(padding-left：10%。距离左边补10%的距离)。

4、paddingright用法：padding-right：10px。这个意思距离右边补距10像素，可跟百分比如(padding-right：10%。距离右边补10%的距离)。

5、paddingtop用法：padding-top：10px。这个意思距离顶边补距10像素，可跟百分比如(padding-top：10%。距离顶边补10%的距离)。

6、paddingbottom用法：padding-bottom：10px。这个意思距离低边补距10像素，可跟百分比如(padding-bottom：10%。距离底边补10%的距离)。