CSS padding属性实现元素内部空白设置教程

一、padding属性的基本概念

CSS的padding属性用于设置元素的内部空白宽度。它可以为上、右、下、左四个方向单独设置内边距。padding值可以使用绝对长度（像素、厘米等）、相对长度（百分比）或者是预定义值来设置。

预定义的padding值分别为：thin（较细）、medium（中等）、thick（较粗）。这些值是由浏览器自行定义的。

对于padding属性，也可以使用缩写形式，即设置四个方向的内边距值，如：padding: 20px 10px 30px 5px，表示上边距为20px，右边距为10px，下边距为30px，左边距为5px。

二、使用padding属性实现内部空白

padding属性最常见的用途就是为元素设置内部空白，让元素内容与边框之间保持一段距离。

.box {
  padding: 20px;
  border: 1px solid #ccc;
}

上面的代码演示了基本的使用padding属性设置元素内部空白的方式，即为.box元素设置20px的内边距，并且添加一像素的实线边框。

此时，我们可以通过浏览器开发者工具查看.box的内部情况：

.box {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

可以看到，通过padding属性设置的内边距，被拆分成了四个方向的内边距属性。我们可以通过修改这些属性的值，单独控制元素四个方向的内边距大小。

三、使用padding属性实现类似margin效果

除了为元素设置内部空白，padding属性还可以被用来实现与margin类似的效果。比如，在两个相邻元素之间添加一段距离。

.box1 {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.box2 {
  padding-top: 20px;
}

在box1元素的下边框处，添加了20px的下内边距，并且设置了与下面的box2元素之间的分隔线样式。而box2元素则被设置了20px的上内边距，来与box1分离开。

这种方式看起来是在模拟margin样式，但不能像margin样式那样合并相邻元素的外边距。

四、padding属性对元素尺寸的影响

值得注意的是，padding属性会影响元素的尺寸。比如，当我们对一个宽度为100px，高度为50px的div元素设置20px的padding值时，元素实际的宽度和高度都会增加40px。

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

上面的代码段演示了这种情况。此时，我们可以通过浏览器开发者工具查看.box元素的尺寸，发现它的宽度变成了140px，高度变成了90px。

如果对元素进行盒模型的设置，即box-sizing属性设置为border-box，可以让padding属性不改变元素的尺寸，而是让内容区域缩小相应的像素。

.box {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

在这种设置下，.box元素的实际宽高仍然是100px * 50px，而内容区域的宽高为60px * 10px。

五、小结

CSS的padding属性很好用，可以用于设置元素的内边距，也可以用于实现类似margin的效果。同时，需要注意的是，padding属性会影响元素的尺寸，需要根据具体情况选择使用。

下面是一个完整的例子，展示了如何使用padding属性实现元素内部空白设置。此例演示了如何使用缩写形式的padding属性，以及如何为不同元素设置不同的padding值。

.box {
  padding: 20px 40px;
  border: 1px solid #ccc;
}
.title {
  padding: 10px 20px;
  background-color: #eee;
}
.text {
  padding: 5px 10px;
}