边距（margin）

在CSS中，边距（margin）是用来定义元素与其相邻元素之间的空白区域。它不会影响元素的内容尺寸，但会影响到元素的框模型。边距可以是负值，但通常不建议这样做，因为它可能会导致意外的布局问题。

以下是一些CSS中常用的边距属性：

1. `margin-top`：定义元素顶部边距。
2. `margin-right`：定义元素右侧边距。
3. `margin-bottom`：定义元素底部边距。
4. `margin-left`：定义元素左侧边距。

这些属性可以单独设置，也可以使用简写属性`margin`来同时设置所有四个边距：

```css
margin: 10px 20px 30px 40px;
```

上面的例子中，第一个值`10px`是`margin-top`和`margin-bottom`的值，第二个值`20px`是`margin-right`和`margin-left`的值。如果没有指定所有四个值，则未指定的值会使用默认值或继承值。

下面是一个简单的HTML和CSS示例，展示了如何使用边距属性：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Margin Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #f00;
    margin: 20px; /* 简写属性 */
  }
</style>
</head>
<body>

</body>
</html>
```

在这个例子中，`.box` 类定义了一个红色背景的100x100像素的盒子，并且设置了20像素的边距。

如果你想要创建一个布局，你可能需要使用外边距（margin）而不是内边距（padding），因为内边距会占用元素的可用空间。例如，如果你想要两个盒子之间有空间，你可以设置它们的边距：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Margin Layout</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #f00;
    margin: 20px; /* 简写属性 */
  }
  .box1 {
    margin-right: 20px; /* 设置右侧边距 */
  }
</style>
</head>
<body>

</body>
</html>
```

在这个例子中，`.box1` 类定义了一个红色背景的100x100像素的盒子，并且设置了20像素的右侧边距，这样它旁边的盒子就会在右侧有空间。

记住，边距是盒模型的一部分，它不会影响元素的内容尺寸，但会影响到元素的框模型。在布局设计时，合理使用边距可以创建出整洁且易于阅读的页面。

边距（margin）

目录