盒子内边距

内边距是什么：

内边距在正文（content）外，边框（border）内。控制该区域最简单的属性是 padding 属性。padding 属性定义元素边框与元素内容之间的空白区域。

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

你可以进行统一的内边距设置，也可以进行单边的那边据设置： 例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

h1 {padding: 10px;}

您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

如果只想设置某一边的那边据，我们也只可以办到的,只需通过以下四个属性：

padding-top

padding-right

padding-bottom

padding-left

顾名思义，这个是很好理解的。

在数值的设置中,我们前面讲到过,可以使用多种单位,常用的就是像素(px)和厘米(cm),这个比较简单,就简单的测试一下就好:

在 html 文件中写入一个表格,加上边框属性:

<table border="1">
    <tr>
        <td>
            正文
        </td>
    </tr>
</table>

这是未设置之前的页面:

下面我们在 CSS 文件中加入

h1 {
    padding-left: 5cm;
    padding-right: 5cm;
    padding-top: 30px;
    padding-bottom: 30px;
}

HTML 代码更新为：

<table border="1">
    <tr>
        <td>
            <h1>正文</h1>
        </td>
    </tr>
</table>

下面就是效果截图:

我们可以看出,我们操作的区域,在正文以外,在边框以内.