(1)padding-left:10px左内边距
(2)padding-right:10px右内边距
(3)padding-top:10px上内边距
(4)padding-bottom:10px下内边距
(5)padding:10px四边统一内边距
(6)padding:10px 20px上下、左右内边距
(7)padding:10px 20px 30px上、左右、下内边距
(8)padding:10px 20px 30px 40px上、右、下、左内边距
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%的距离)。
内边距处于父元素和子元素之间,设置在父元素上,可以理解成物品和盒子中间塞的那层泡沫塑料,使用padding属性。
padding后面可跟多个值,中间用空格分离,含义如下:
我们放置一个宽高为200px的红色大盒子,其中包着一个宽高为100px的粉色小盒子。
我们给大盒子设置一个内边距为50px。
我们会发现给父元素设置了一条左内边距后,它的宽度也被撑大了,这显然不是我们想要的效果,解决方法就是如果加了左内边距,就把父元素宽度缩小相应长度,比如我们刚刚增加了50px的左内边距,就把父元素宽度从200px变为150px,就能达到效果啦,其它方向也是一样的,比如加了上内边距就缩小高度。
下图就可以理解成一个盒子里面套了一个列表,中间有内边距:
我们再来看下面这个图案,由三个盒子和内边距绘制而成。
(盒子就可以替换成其它各种块元素,比如上图里面就是列表)
html:
css:
可以看到我省略了很多宽高。
(1)由于块元素默认宽度占一整行,高度由内容撑开,我们很多时候可以只给最外面的元素设置宽度,最内部的元素设置高度,其它省略,也能达到效果。
如图3-2-1中,我们只需要提供每个列表元素<li>的高度和外面大盒子的宽度即可,其它用内边距撑起或挤出。
(2)最终的高度和内部元素的宽度都是由最外元素宽度、最内元素高度和所有内边距撑起或者挤出来的。
如图3-3-2中:
中间橙色盒子的宽度=红色大盒子的宽度-红色大盒子的左右内边距
红色大盒子的高度=黄色小盒子的高度+橙色中盒子的上下内边距+红色大盒子的上下内边距。
以上操作仅针对块元素,对于内联元素, 左右内边距 是可以 正常使用 的,而 上下内边距 只能 延伸背景颜色 ,并不会把子元素挤到中间。