详细解读CSS中的padding属性

详细解读CSS中的padding属性

引用

CSDN

1.

https://blog.csdn.net/JaveWong/article/details/120885594

在CSS布局中，padding属性是一个非常重要的概念，它决定了元素内容与边框之间的空间大小。本文将详细介绍padding属性的各个组成部分、语法以及使用方法，帮助读者更好地理解和掌握这一基础但关键的CSS属性。

padding属性的基本概念

padding是一个简写属性，用于定义元素边框与元素内容之间的空间，即上下左右的内边距。一个元素的内边距区域指的是其内容与其边框之间的空间。需要注意的是，内边距控制的是元素内部空出的空间，而margin属性则用于控制元素外部空出的空间。

padding属性的组成部分

• padding-top：内容上边距
• padding-bottom：内容下边距
• padding-left：内容左边距
• padding-right：内容右边距

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

padding属性的语法

/* 应用于所有边 */
padding: 1em;

/* 上边下边 | 左边右边 */
padding: 5% 10%;

/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;

/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

/* 全局值 */
padding: inherit; /* inherit：继承父元素padding */
padding: initial; /* initial：设置padding属性为它的默认值（IE 不支持） */
padding: unset;   /* unset：不设置padding */

注意：取值不能为负数！

padding属性接受1~4个值：

• 当只指定一个值时，该值会统一应用到全部四个边的内边距上。
• 指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
• 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
• 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。

padding: 5%;                /* 所有边：5% 的内边距 */
padding: 10px;              /* 所有边：10px 的内边距 */
padding: 10px 20px;         /* 上边和下边：10px 的内边距 */
                            /* 左边和右边：20px 的内边距 */
padding: 10px 3% 20px;      /* 上边：   10px 的内边距 */
                            /* 左边和右边：3% 的内边距 */
                            /* 下边：   20px 的内边距 */
padding: 1em 3px 30px 5px;  /* 上边：1em  的内边距*/
                            /* 右边：3px  的内边距*/
                            /* 下边：30px 的内边距*/
                            /* 左边：5px  的内边距*/