html padding如何设置内边距,内边距：padding - CSS | 绿叶学习网

内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。

一、padding局部样式

从CSS盒子模型中我们可以看出，内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。

语法：

padding-top: 像素值;

padding-right: 像素值;

padding-bottom: 像素值;

padding-left: 像素值;

举例：

{

display:inline-block; /*将块元素转换为inline-block元素*/

padding-top:20px;

padding-right:40px;

padding-bottom:60px;

padding-left:80px;

border:2px solid red;

background-color:#FFDEAD;

}

绿叶学习网

浏览器预览效果如下图所示。

二、padding简写形式

跟border属性一样，padding属性也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。padding写法有3种，如下所示。

语法：

padding: 像素值;

padding: 像素值1 像素值2;

padding: 像素值1 像素值2 像素值3 像素值4;

说明：

padding:20px表示4个方向的内边距都是20px。

padding:20px 40px表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。

padding:20px 40px 60px 80px表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。

举例：

{

display:inline-block; /*将块元素转换为inline-block元素*/

padding:40px 80px;

margin:40px;

border:2px solid red;

background-color:#FFDEAD;

}

绿叶学习网

浏览器预览效果如下图所示。

分析：

如果你想要让文本在一个元素内部居中，可以使用padding来实现，就像这个例子一样。