CSS间距属性

CSS间距属性是指在网页布局中，用来控制元素之间距离的属性。它包括margin（外边距）、padding（内边距）和border（边框）。

margin

margin（外边距）是元素与周围元素之间的距离。它可以取以下值：

• auto：自动计算，通常用于居中布局。
• 像素值：固定的像素值，可以是正值或负值。
• 百分比值：相对于父元素的宽度计算得出的百分比值，可以是正值或负值。
• inherit：从父元素继承margin值。

margin可以设置四个方向的值，如下所示：

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

也可以使用margin的简写形式，按顺序设置上、右、下、左四个方向的值，如下所示：

margin: 10px 20px 10px 20px;

padding

padding（内边距）是元素内部内容与元素边框之间的距离。它可以取以下值：

• 像素值：固定的像素值，可以是正值或0。
• 百分比值：相对于父元素的宽度计算得出的百分比值，可以是正值或0。
• inherit：从父元素继承padding值。

padding可以设置四个方向的值，如下所示：

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

也可以使用padding的简写形式，按顺序设置上、右、下、左四个方向的值，如下所示：

padding: 10px 20px 10px 20px;

border

border（边框）是围绕元素内容和内边距之外的边框线。它可以取以下值：

• 像素值：固定的像素值。
• inherit：从父元素继承border值。

border可以设置三个方向的值：border-width（边框宽度）、border-style（边框样式）和border-color（边框颜色），如下所示：

border-width: 2px;
border-style: solid;
border-color: #000;

也可以使用border的简写形式，按顺序设置宽度、样式和颜色，如下所示：

border: 2px solid #000;

示例

以下是一个示例，展示了如何使用margin、padding和border属性控制元素之间的间距：

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    margin: 20px;
    padding: 20px;
    border: 2px solid #000;
  }
</style>

<div class="box">
  <p>Hello, world!</p>
</div>

<div class="box">
  <p>Hello, world!</p>
</div>

上述代码会生成两个大小为200px*200px的盒子，并且它们之间的距离为20px。每个盒子内部有一个段落元素，段落与盒子边框之间的距离为20px。盒子边框线的颜色为黑色、宽度为2px并呈单实线样式。