CSS padding（填充）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

padding（填充）

当元素的padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用padding属性可以改变上下左右的填充。

可能的值

值	说明
length	定义一个固定的填充（像素，pt，em，等）
%	使用百分比比值定义一个填充

填充-单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>p{background-color:red;}p.padding{padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;}
</style>
</head><body><p>这是一个没有指定填充边距的段落111111111111111111111111111111。</p><p class="padding">这是一个指定填充边距的段落11111111111111111111111。</p>
</body></html>

效果图如下所示:

填充-简写属性

所有的填充属性的简写属性时padding

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>p{background-color:yellow;}p.padding{padding:25px 50px;}
</style>
</head><body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body></html>

效果图如下所示:

Padding属性，可以有一个到四个值：

padding：25px 50px 75px 100px 分别代表：上填充，右填充，下填充，左填充

padding：25px 50px 75px 分别代表：上填充，右左填充，下填充

padding：25px 50px 分别代表：上下填充，右左填充

padding：25px 分别代表：上下右左填充

所有的CSS填充属性

属性	说明
padding	使用简写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

CSS padding（填充）相关推荐

html网页距离顶部50像素,HTML5 教程之CSS Padding（填充）
CSS Padding(填充) CSS Padding(填充)属性定义元素边框与元素内容之间的空间. Padding(填充) 当元素的 Padding(填充)(内边距)被清除时,所"释放&q ...
css padding效果,CSS Padding（填充）
CSS Padding(填充) CSS Padding(填充)属性定义元素边框与元素内容之间的空间. Padding(填充) 当元素的 Padding(填充)(内边距)被清除时,所"释放&q ...
html设置padding颜色,CSS Padding（填充）
CSS Padding(填充) CSS Padding(填充)属性定义元素边框与元素内容之间的空间. Padding(填充) 当元素的 Padding(填充)(内边距)被清除时,所"释放&q ...
CSS 轮廓（outline）/CSS margin(外边距)/CSS padding（填充）
所有CSS 轮廓(outline)属性 CSS margin(外边距) margin margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin 可以单独改变 ...
php中padding,css中padding填充详解
语法: padding:[ | ]{1,4} 默认值:看每个独立属性适用于:所有元素,除 table-row-group | table-header-group | table-footer-gr ...
CSS padding
CSS padding 是用来控制div table 内间距的,下面我们就来讲一下padding 实例吧. CSS padding 利用CSS填充,你将能够更改默认的间隙内出现的各种HTML元素(段落 ...
CSS图像填充文字（镂空文字效果 / 文字镂空效果）
先展示一下最终效果: 开始做 1. 搭建基本代码结构 <!DOCTYPE html> <html><head><meta charset="utf- ...
[css] padding会影响到元素的大小，那不想让它影响到元素的宽度应该怎么办？
[css] padding会影响到元素的大小,那不想让它影响到元素的宽度应该怎么办? box-sizing:border-box 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...