详解CSS盒子模型之内边距padding及简写

什么是盒子模型

在CSS中，我们把HTML中的元素看作是一个个方块，这些方块就是所谓的盒子，而CSS盒子模型就是指这些盒子的属性和排列方式。

盒子模型包含四个部分：内容（content）、内边距（padding）、边框（border）、外边距（margin）。

其中，本文主要介绍内边距(padding)及其简写属性。

padding属性

padding属性表示元素内部与边框之间的距离，它可以接受多个值，表示分别为上、右、下、左（顺时针顺序）方向设置内边距。

padding属性值的取值可以是一个固定的像素值，也可以是百分比以及其他单位，如下：

padding: 10px; /* 四个方向的内边距都为10px */
padding: 10px 20px; /* 上下内边距为10px, 左右内边距为20px */
padding: 10px 20px 30px; /* 上内边距为10px, 左右内边距为20px，下内边距为30px */
padding: 10px 20px 30px 40px; /* 分别为上、右、下、左的内边距设置，顺时针方向 */

简写属性

我们还可以通过padding的简写属性来为元素设置内边距：

padding: 10px; /* 四个方向都为10px */
padding: 10px 20px; /* 上下10px，左右20px */
padding: 10px 20px 30px; /* 上10px，左右20px，下30px */
padding: 10px 20px 30px 40px; /* 上10px，右20px，下30px，左40px */

简写属性的顺序为：上、右、下、左（顺时针顺序），每个值之间用空格隔开。

padding示例说明

下面给出两个具体的例子，加深我们对padding及其简写属性的理解：

示例一

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
}

该例子定义了一个宽高分别为100px的盒子，它的边框为1像素黑色实线，内边距为10px。

此时，元素的实际宽度为：

100px (width) 
+ 2 * 1px (左右边框) 
+ 2 * 10px (左右内边距) 
= 122px

而高度也会因为上下边框及内边距的存在而增加。

示例二

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px 20px;
}

该例子定义了一个宽高分别为100px的盒子，它的边框为1像素黑色实线，上下内边距为10px，左右内边距为20px。

此时，元素的实际宽度为：

100px (width) 
+ 2 * 1px (左右边框) 
+ 2 * 20px (左右内边距) 
= 142px

而高度也会因为上下边框及内边距的存在而增加。

总结

本文详细讲解了CSS盒子模型的内边距(padding)及其简写属性，希望能够加深大家对CSS盒子模型的理解和掌握。