间距控制

在网页布局中，合理控制元素间的间距能使页面更加整洁美观。CSS 提供了 margin 和 padding 两个属性来分别设置外边距和内边距。

1. 外边距（margin）

控制元素与其他元素之间的距离。可以分别设置四个方向的外边距：

margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;

简写形式：

margin: 10px 15px; /* 上下10px，左右15px */
margin: 10px 15px 5px 20px; /* 上 右 下 左 */

2. 内边距（padding）

控制元素内容与元素边框之间的距离，也支持四个方向分别设置：

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

简写形式：

padding: 5px 10px; /* 上下5px，左右10px */
padding: 5px 10px 8px 12px; /* 上 右 下 左 */

3. 负值和百分比

• margin 可以使用负值，缩小元素间距。
• padding 不支持负值。
• 两者均支持百分比，但百分比是相对于包含块的宽度计算。

示例

.box {
  margin: 20px auto;    /* 上下20px，左右自动居中 */
  padding: 15px 10px;   /* 上下15px，左右10px内边距 */
  border: 1px solid #ccc;
}

合理使用间距控制，可以让布局更加美观且易于维护。