什么是内边距：就是元素边框到元素间的距离。 内边距分别按上、右、下、左 顺序进行设置。
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div.box{
width:200px;
height:100%;
background-color:yellow;
border:5px solid blue;
padding-left:15px;
text-align:left;
}
p{color:red;}
table,th,td{border:1px solid black;}
th,td{text-align:center;padding:5px;width:100px;}
table{caption-side:top;}
caption{
text-align:left;
color:red;
}
</style>
</head>
<body>
<h3>内边距实例</h3>
<div class="box">
<p>宽度为：200px;<br/>
高度为：100%；<br/>
背景颜色：yellow;<br/>
边框为：5px 实线 蓝色；<br/>
内边距为：15px；
</p>
</div>
<br/>
<table>
<caption>内边距的属性</caption>
<tr>
<th>属性</th>
<th>注释</th>
</tr>
<tr>
<td>padding-top</td>
<td>上边距</td>
</tr>
<tr>
<td>padding-right</td>
<td>右边距</td>
</tr>
<tr>
<td>padding-bottom</td>
<td>下边距</td>
</tr>
<tr>
<td>padding-left</td>
<td>左边距</td>
</tr>
</table>
<p><b>注释：</b>边距是按上，右，下，左的顺序来设置。</p>
</body>
</html>
运行效果：
评论