元素内部边距是指元素内容与元素四边边框之间的距离，内部边距的作用是让元素的内容在元素四周留有空白。内部边距使用标签padding，padding的属性值为数值或百分比。属性值为百分比时，其实际数值是相对于父元素宽度计算的，当父元素宽度发生变化时，padding的属性值也会发生变化。padding的属性值有1至4个，其使用方法如下所示。
padding给出1个属性值时，元素的上内边距、右内边距、下内边距、左内边距都被定义为同一个值。下面的样式语句定义了元素上内边距是10px，右内边距是10px、下内边距是10px、左内边距是10px。
.p_style
{
padding:10px;
}padding给出2个属性值时，元素的上下内边距被定义为同一个值，元素的左右内边距被定义为同一个值。下面的样式语句定义了元素上下内边距是15px、左右内边距是10px。
.p_style
{
padding:15px 10px;
}padding给出3个属性值时，元素的左右内边距被定义为同一个值。下面的样式语句定义了元素上内边距是15px、左右内边距是5px、下内边距是10px。
.p_style
{
padding:15px 5px 10px;
}padding给出4个属性值时，元素的上、右、下、左内边距分别被定义为不同的值。下面的样式语句定义了元素上内边距是10px、右内边距是5px、下内边距是15px、左内边距是20px。
.p_style
{
padding:10px 5px 15px 20px;
}下面的HTML文档展示了padding的使用方法。
<html>
<head>
<title>border-style样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.p1{border-style:solid; padding:10px;}
.p2{border-style:dashed;padding:15px 10px;}
.p3{border-style:dotted;padding:15px 5px 10px;}
.p4{border-style:double;padding:10px 5px 15px 20px;}
</style>
</head>
<body>
<p>上、右、下、左内边距为10px</p>
<p>上下内边距为15px，左右内边距为10px</p>
<p>上内边距15px，左右内边距5px，下内边距为10px</p>
<p>上内边距为10px，右内边距为5px，下内边距为15px，左内边距为20px</p>
</body>
</html>在上面的网页代码中，分别定义了p1（padding有1个值）、p2（padding有2个值）、p3（padding有3个值）、p4（padding有4个值）四个样式，这四个样式分别应用于p元素。浏览器显示效果如下图所示。
单独设置上、右、下、左内边距
前面介绍的padding样式标签对元素的上、右、下、左内边距都会产生作用。另外，CSS提供了样式标签padding-top（设置上内边距）、padding-right（设置右内边距、padding-bottom（设置下内边距）、padding-left（设置左内边距），用于分别设置HTML元素上、右、下、左的内边距。下面的HTML文档展示了样式标签的使用方法。
<html>
<head>
<title>border-style样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.ptop{border-style:solid; padding-top:20px;}
.pright{border-style:dashed;padding-right:20px;}
.pbottom{border-style:dotted;padding-bottom:20px;}
.pleft{border-style:double;padding-left:20px;}
</style>
</head>
<body>
<p>上内边距为20px</p>
<p>右内边距为20px</p>
<p>下内边距为20px</p>
<p>左内边距为20px</p>
</body>
</html>浏览器显示效果如下图所示。
