css padding是元素的内边距，即元素边框到元素内容之间的距离，因此它有上下左右四个边距，分别是：

  • padding-top：内容上边距
  • padding-bottom：内容下边距
  • padding-left：内容左边距
  • padding-right：内容右边距

css padding 内边距

它还有一个简写的方式:

  •     padding: 内边距的缩写形式，同时设置上下左右四个边距。

padding语法

1）四个内边距的语法：

/*上边距*/
pading-top:value;
/*下边距*/
pading-bottom:value;
/*左边距*/
pading-left:value;
/*右边距*/
pading-right:value;

value值单位可以为em、ex、pt、px、百分比等。

默认情况下是padding为0px。

2） 简写形式的语法。

padding: 上边 [右边 下边 左边];

例如：

1） 四个参数的内边距

{padding: 5px 6px 6px 6px ;}    /*四个值为上、右、下、左*/
/*或*/
P{padding: 5px 6px 6px ;}       /*三个值为上、左右、下*/
/*或*/
P{padding: 5px 6px;}       /*2个值为上下、左右*/

例子

 <!DOCTYPE html>
<html>
<title>css 内边距 padding</title>
<head>
<style>
p {
	border:1px solid orange;
	width:240px;
        background-color: pink;
}
p.padding {
    padding-top: 30px;
    padding-right: 40px;
    padding-bottom: 30px;
    padding-left: 40px;
}
</style>
</head>
<body>
<p>这是一个没有指定填充的段落。</p>
<p class="padding">这是具有指定填充的段落。</p>
</body>
</html>

效果如图：

css padding 内边距

2） 简写形式的内边距。

 <!DOCTYPE html>
<html>
<title>css 内边距 padding</title>
<head>
<style>
p {
	border:1px solid orange;
	width:240px;
        background-color: pink;
}
p.padding {
	padding:30px 40px; /*上下30px 左右40px*/
   
}
</style>
</head>
<body>
<p>这是一个没有指定填充的段落。</p>
<p class="padding">这是具有指定填充的段落。</p>
</body>
</html>
我们看到效果是一样的。

css padding 内边距