CSS 填充（内边距）

内边距是指元素的内容区域与其边框之间的区域，与外边距不同，内边距受背景属性的影响。您可以使用以下属性设置元素填充的大小：

padding-top：设置元素内容区域上方的填充。
padding-right：将内边距设置为元素内容区域的右侧。
padding-bottom：设置元素内容区域下方的填充。
padding-left：将内边距设置为元素内容区域的左侧。
padding：padding属性的缩写，允许同时设置四个方向的padding：上、下、左、右。

上述属性的可选值如下表所示。

价值	阐明
长度	使用以 px、cm 或其他单位为单位的特定值定义元素内边距的大小。不允许使用负值。默认值为 0 像素。
%	根据父元素宽度的百分比定义填充。不允许使用负值
继承	从父元素继承 padding 属性值

定义所有方向的填充

您可以使用 padding-top、padding-bottom、padding-left 和 padding-right 属性分别在四个方向上设置元素的内边距：上、下、左和右。

【示例】定义元素上、下、左、右四个方向的内边距：

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding-top: 10px;
            padding-bottom: 2em;
            padding-left: 1cm;
            padding-right: 3ex;
            border: 1px solid red;
            background: #CFC;
        }
    </style>
</head>
<body>
    <div>
        padding-top: 10px;<br>
        padding-bottom: 2em;<br>
        padding-left: 1cm;<br>
        padding-right: 3ex;
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_595”对齐=“aligncenter”宽度=“1024”]

图：padding-top、padding-bottom、padding-left、padding-right属性演示[/caption]

填充的缩写形式

padding属性是其他四个属性的缩写，也是现实开发中最常用的缩写。与margin属性一样，paddiing属性也可以接受1到4个参数（参数之间用空格分隔）。

如果指定了四个参数，则按以下顺序设置元素的四向填充：top、right、bottom、left。
如果指定了三个参数，第一个参数用于设置元素的顶部填充，第二个参数用于设置元素的水平填充，第三个参数用于设置元素。元素下方的填充。
如果指定了两个参数，则第一个参数用于设置元素的垂直内边距，第二个参数用于设置元素的水平内边距。
如果只指定一个参数，则该参数同时影响元素四个方向的边距。

[示例] 使用 padding 属性设置元素的内边距。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding: 10px 3ex 2em 1cm;
            border: 1px solid red;
            background: #CFC;
        }
    </style>
</head>
<body>
    <div>
        パディング：10ピクセル3ex 2em 1センチメートル;
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_596”对齐=“aligncenter”宽度=“1024”]

图：Padding属性演示[/caption]

JSON

内边距是指元素的内容区域与其边框之间的区域，与外边距不同，内边距受背景属性的影响。您可以使用以下属性设置元素填充的大小：

padding-top：设置元素内容区域上方的填充。
padding-right：将内边距设置为元素内容区域的右侧。
padding-bottom：设置元素内容区域下方的填充。
padding-left：将内边距设置为元素内容区域的左侧。
padding：padding属性的缩写，允许同时设置四个方向的padding：上、下、左、右。

上述属性的可选值如下表所示。

价值	阐明
长度	使用以 px、cm 或其他单位为单位的特定值定义元素内边距的大小。不允许使用负值。默认值为 0 像素。
%	根据父元素宽度的百分比定义填充。不允许使用负值
继承	从父元素继承 padding 属性值

定义所有方向的填充

您可以使用 padding-top、padding-bottom、padding-left 和 padding-right 属性分别在四个方向上设置元素的内边距：上、下、左和右。

【示例】定义元素上、下、左、右四个方向的内边距：

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding-top: 10px;
            padding-bottom: 2em;
            padding-left: 1cm;
            padding-right: 3ex;
            border: 1px solid red;
            background: #CFC;
        }
    </style>
</head>
<body>
    <div>
        padding-top: 10px;<br>
        padding-bottom: 2em;<br>
        padding-left: 1cm;<br>
        padding-right: 3ex;
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_595”对齐=“aligncenter”宽度=“1024”]

图：padding-top、padding-bottom、padding-left、padding-right属性演示[/caption]

填充的缩写形式

padding属性是其他四个属性的缩写，也是现实开发中最常用的缩写。与margin属性一样，paddiing属性也可以接受1到4个参数（参数之间用空格分隔）。

如果指定了四个参数，则按以下顺序设置元素的四向填充：top、right、bottom、left。
如果指定了三个参数，第一个参数用于设置元素的顶部填充，第二个参数用于设置元素的水平填充，第三个参数用于设置元素。元素下方的填充。
如果指定了两个参数，则第一个参数用于设置元素的垂直内边距，第二个参数用于设置元素的水平内边距。
如果只指定一个参数，则该参数同时影响元素四个方向的边距。

[示例] 使用 padding 属性设置元素的内边距。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding: 10px 3ex 2em 1cm;
            border: 1px solid red;
            background: #CFC;
        }
    </style>
</head>
<body>
    <div>
        パディング：10ピクセル3ex 2em 1センチメートル;
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_596”对齐=“aligncenter”宽度=“1024”]

图：Padding属性演示[/caption]

JSON