padding 属性用以设置元素的内边距，有以下取值：

长度
百分比：针对父元素宽度的百分比。

$$warning

对于行内元素，上下内边距不占据页面空间。

$$tip

padding 与 margin 的区别：

padding 填充了元素的内容区域，可以增大背景色的范围，也可触发事件。
margin 用来控制元素之间的距离。

当设置值的数量不同时，应用的效果也不同：

/* 设置所有边距 */
padding: 10px;
/* 设置上下边距为 10px，左右边距为 20px */
padding: 10px 20px;
/* 设置上边距为 10px，左右边距为 20px，下边距为 30px （不推荐）*/
padding: 10px 20px 30px;
/* 设置上边距为 10px，右边距为 20px， 下边距为 30px，左边距为 40px */
padding: 10px 20px 30px 40px;

也可以单个边距设置值：

/* 设置上边距 */
padding-top: 10px;
/* 设置下边距 */
padding-bottom: 10px;
/* 设置左边距 */
padding-left: 10px;
/* 设置右边距 */
padding-right: 10px;

练习

完成以下的案例。

$$demo

<div class="brand">三眼鸭的编程教室</div> <style> .brand { display: inline-block; color: white; font-size: 24px; font-weight: bold;

    background-color: teal;
    padding: 20px 40px;
}

</style>

$$answer

<div class="brand">三眼鸭的编程教室</div>
<style>
    .brand {
        display: inline-block;
        color: white;
        font-size: 24px;
        font-weight: bold;

        background-color: teal;
        padding: 20px 40px;
    }
</style>

完善以下代码达到实例的效果。

<button>管理</button>
<button>编辑</button>
<button>删除内容</button>

$$demo

<button class="btn manage">管理</button> <button class="btn edit">编辑</button> <button class="btn delete">删除内容</button> <style> .btn { padding: 10px 40px; color: white; font-weight: bold; }

.manage {
    background-color: #409eff;
}

.edit {
    background-color: #67c23a;
}

.delete {
    background-color: #f56c6c;
}

</style>

$$answer

<button class="btn manage">管理</button>
<button class="btn edit">编辑</button>
<button class="btn delete">删除内容</button>
<style>
    .btn {
        padding: 10px 40px;
        color: white;
        font-weight: bold;
    }

    .manage {
        background-color: #409eff;
    }

    .edit {
        background-color: #67c23a;
    }

    .delete {
        background-color: #f56c6c;
    }
</style>