CSS边框间距属性

CSS边框间距属性是指控制元素边框与周围元素之间的距离的属性。它由四个独立的属性组成，分别是border-width、border-style、border-color和margin。

border-width

border-width属性用于定义元素边框宽度的大小。它可以有一个值，这个值会应用于所有四个边框，也可以有四个值，分别对应上、右、下、左四条边框的宽度。

示例代码：

div{
    border-width: 1px; /*所有边框宽度都是1px*/
}

hr{
    border-width: 2px 0; /*上下两条边框宽度是2px，左右两条边框宽度是0*/
}

border-style

border-style属性用于定义元素边框的样式。它同样可以有一个值或四个值，分别对应上、右、下、左四条边框的样式。

常见的样式有：实线(solid)、虚线(dashed)、点线(dotted)、双线(double)等。

示例代码：

div{
    border-style: solid; /*所有边框都是实线*/
}

hr{
    border-style: dashed dotted double solid; /*上、下、左、右分别为虚线、点线、双线、实线*/
}

border-color

border-color属性用于定义元素边框的颜色。它同样可以有一个值或四个值，分别对应上、右、下、左四条边框的颜色。

示例代码：

div{
    border-color: red; /*所有边框颜色都是红色*/
}

hr{
    border-color: red green blue yellow; /*上、右、下、左边框颜色分别为红、绿、蓝、黄*/
}

margin

margin属性用于定义元素边框与周围元素之间的距离。它同样可以有一个值或四个值，分别对应上、右、下、左四个方向。

示例代码：

div{
    margin: 10px; /*四个方向都是10px*/
}

hr{
    margin: 10px 20px; /*上下为10px，左右为20px*/
}

以上就是CSS边框间距属性的介绍。可以根据自己的需求灵活运用这些属性，打造出符合自己需求的页面布局。