CSS内边距属性（padding）

点击打开在线编译器，边学边练

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

CSS内边距

值	说明
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承padding

1. 使用像素值（px）设置填充

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS简单学习</title>
        <style type="text/css">
            p.nopadding {
                background-color: #00FFFF;
            }
            p.padding {
                background-color: #00FFFF;
                padding-top: 25px;
                padding-bottom: 25px;
                padding-left: 50px;
                padding-right: 50px;
            }
        </style>
    </head>

    <body>
        <p>这是一个没有指定填充边距的段落</p>
        <p>这是一个指定过填充边距大小的段落</p>
    </body>
</html>

运行结果：

使用像素值（px）设置填充

2. 使用margin简写属性设置填充（厘米值cm、百分比值%）

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:

（1）padding:10px 5px 15px 20px;

a.上填充是 10px

b.右填充是 5px

c.下填充是 15px

d.左填充是 20px

（2）padding:10px 5px 15px;

a.上填充是 10px

b.右填充和左填充是 5px

c.下填充是 15px

（3）padding:10px 5px;

a.上填充和下填充是 10px

b.右填充和左填充是 5px

（4）padding:10px;

a.所有四个填充都是 10px

注意：负值是不允许的。

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <title>CSS简单学习</title>
            <style type="text/css">
                p {
            background-color: orange;
            }
            p.ex1 {
padding: 2cm 6cm 3cm 8cm;
            }
            p.ex2 {
padding: 5% 30%;
            }
        </style>
    </head>

    <body>
        <p>这是一个没有指定填充边距大小的段落</p>
        <p>这是一个使用&quot;厘米cm&quot;指定填充边距大小的段落</p>
        <p>这是一个使用&quot;百分比值%&quot;指定填充边距大小的段落</p>
    </body>
</html>

运行结果：

使用margin简写属性设置填充

属性	描述
padding-top	设置元素内容区上方的内边距
padding-right	设置元素内容区右侧的内边距
padding-bottom	设置元素内容区下方的内边距
padding-left	设置元素内容区左侧的内边距
padding	内边距属性的缩写形式，可以同时设置上下左右四个方向上的内边距