CSS 外边距 (margin) 和 内边距 (padding) 的区别和用法

在 CSS 中，外边距 (margin) 和 内边距 (padding) 都是用来控制元素的布局和间距的属性。

1. 外边距 (margin)：外边距是元素边缘与周围元素之间的空白区域。它用于控制元素与其他元素之间的间距。外边距可以在元素的外部创建空白区域，它不会影响元素的大小和内容。外边距的值可以为正数、负数或百分比，取决于需要设置的间距大小。

.box {
  margin: 10px; /* 设置四个方向的外边距为 10 像素 */
  margin-top: 20px; /* 设置顶部外边距为 20 像素 */
  margin-bottom: 30px; /* 设置底部外边距为 30 像素 */
  margin-left: 5%; /* 设置左侧外边距为 5% */
  margin-right: -15px; /* 设置右侧外边距为 -15 像素 */
}

2. 内边距 (padding)：内边距是元素内容区域与元素边缘之间的空白区域。它用于控制元素内部内容与边缘之间的间距。内边距的值可以为正数或百分比，取决于需要设置的间距大小。

.box {
  padding: 10px; /* 设置四个方向的内边距为 10 像素 */
  padding-top: 20px; /* 设置顶部内边距为 20 像素 */
  padding-bottom: 30px; /* 设置底部内边距为 30 像素 */
  padding-left: 5%; /* 设置左侧内边距为 5% */
  padding-right: 15px; /* 设置右侧内边距为 15 像素 */
}

通过设置外边距和内边距的属性，我们可以控制元素之间的间距和元素内部内容与边缘之间的间距。这样可以实现更好的布局控制和页面设计。