CSS 填充与边距

在CSS中，填充和边距是两个很重要的概念。填充指的是元素内部的空白区域，而边距则指的是元素周围的空白区域。它们可以用来控制元素的布局和样式。

1. 填充（padding）

元素的填充指的是元素内容与边框之间的空间。可以通过padding属性来设置元素的填充大小：

div {
  padding: 20px;
}

上面的代码将会给所有的 div 元素都设置20个像素的填充，在元素的内部留出一个20px的空白区域。

我们也可以设置不同的填充大小，以上、右、下、左的顺序：

div {
  padding: 10px 20px 15px 30px;
}

上述代码中，第一个值为 上方填充，第二个值为右侧填充，第三个值为下方填充，第四个值为左侧填充。这个例子将会设置上方填充为 10px，右侧填充为 20px，下方填充为 15px，左侧填充为 30px。

我们也可以只设置水平（左右）填充或垂直（上下）填充:

div {
  padding: 20px 10px; /* 上下 20px、左右 10px */
  /* 或者 */
  padding: 10px; /* 上下左右均为 10px */
}

还可以使用 padding-top、padding-right、padding-bottom、padding-left 分别设置上、右、下、左方向的填充大小。

2. 边距（margin）

元素的边距指的是元素外部的空间。可以通过 margin 属性来设置元素的外边距大小：

div {
  margin: 20px;
}

上述代码将会为所有的 div 元素设置20像素的外边距，在元素的外部留出一个20px的空白区域。

margin 属性也可以像 padding 属性一样设置不同方向上的值：

div {
  margin: 10px 20px 15px 30px;
}

这个例子将会分别设置上边距为10px、右边距为20px、下边距为15px、左边距为30px。

和 padding 属性一样，我们也可以只设置水平（左右）边距或垂直（上下）边距：

div {
  margin: 20px 10px; /* 上下 20px、左右 10px */
  /* 或者 */
  margin: 10px; /* 上下左右均为 10px */
}

同样的，也可以使用 margin-top、margin-right、margin-bottom、margin-left 分别设置上、右、下、左方向的边距大小。

3. 总结

填充和边距可以用来控制元素的布局和样式。它们可以设置为固定的值，也可以是百分比、em、rem等单位。了解填充和边距的用法，能够帮助我们更好的控制页面布局，实现精细化的UI效果。