CSS 边界块属性

CSS 中的边界块属性是用于控制元素边框和内边距的属性，它们包括：

• border：用于设置元素的边框样式、宽度和颜色。
• padding：用于设置元素内部空间和内容之间的距离。
• margin：用于设置元素与其他元素之间的距离。

border

border 属性用于设置元素的边框样式、宽度和颜色。它有三个子属性：

• border-width：用于设置边框的宽度。
• border-style：用于设置边框的样式。
• border-color：用于设置边框的颜色。

h1 {
  border: 2px solid black;
  /* 等同于下面的写法 */
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

border 属性还可以分别设置每个边框的样式、宽度和颜色：

h1 {
  border-top: 2px solid black;
  border-right: 3px dotted red;
  border-bottom: 2px dashed green;
  border-left: 3px double blue;
}

padding

padding 属性用于设置元素内部空间和内容之间的距离。它有四个子属性：

• padding-top：用于设置内边距顶部的距离。
• padding-right：用于设置内边距右侧的距离。
• padding-bottom：用于设置内边距底部的距离。
• padding-left：用于设置内边距左侧的距离。

h1 {
  padding: 20px;
  /* 等同于下面的写法 */
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

padding 属性还可以分别设置每个方向的内边距：

h1 {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

margin

margin 属性用于设置元素与其他元素之间的距离。它有四个子属性：

• margin-top：用于设置外边距顶部的距离。
• margin-right：用于设置外边距右侧的距离。
• margin-bottom：用于设置外边距底部的距离。
• margin-left：用于设置外边距左侧的距离。

h1 {
  margin: 20px;
  /* 等同于下面的写法 */
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

margin 属性还可以分别设置每个方向的外边距：

h1 {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

总结：

边界块属性是用于控制元素边框和内边距的属性，包括 border、padding 和 margin 三个属性。它们有多个子属性可以设置元素的边框和间距。在实际应用中，可以根据需要灵活运用这些属性来控制元素的外观以及与其他元素之间的间距。