在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素
- element : 元素。
- padding : 内边距,也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距,也有资料将其翻译为空白或空白边。
padding是代码的上下左右都同时加上所属值,你也可以分别加上所属值
比如左边则为:padding-left
其具体用法如下:
定义和用法
padding 简写属性在一个声明中设置所有内边距属性。
说明
这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释:不允许使用负值。但是margin可以。
例子 1
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
例子 2
padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
例子 3
padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
例子 4
padding:10px;
所有 4 个内边距都是 10px
关于图片居中显示的例子
1.使用margin padding
<html>
<body>
<div style="width:50%;height:120px;margin:100px 510px 0px;padding:100px 100px 0px;float:left"><img src="elephant.jpg"></div>
<div style="width:100%;height:50px;float:left;text-align:center">大象</div>
</body>
</html>
2.使用多个div
<html>
<body>
<div style="width:100%;height:50%"></div>
<div style="width:40%;height:200px;float:left;"></div>
<div style="width:60%;height:200px;float:left;"><img src="elephant.jpg">
<div style="width:100%;height:200px;float:left;">大象</div>
</div>
</body>
</html>