Posted on | by liu
边框距离是CSS中经常用到的概念，表示元素的边框和其它元素的距离。本文将简单介绍一下CSS中边框距离的相关属性。
1. margin
margin属性是控制元素外边距的属性，可以设置上、右、下、左四个方向的距离。它可以用长度值、百分比、auto来设置，同时也可以用负值来表示元素的重叠。例如下面的代码：
p {
margin: 10px 20px 30px 40px;
}上述代码表示p元素的上边距为10px、右边距为20px、下边距为30px、左边距为40px。
2. padding
padding属性是控制元素内边距的属性，类似于margin，也可以设置上、右、下、左四个方向的距离，可以用长度值、百分比来设置。例如下面的代码：
p {
padding: 10px;
}上述代码表示p元素的上、右、下、左内边距均为10px。
3. border
border属性是控制元素边框的属性，它包括border-width、border-style、border-color三个子属性。其中border-width设置边框的宽度，可以设置上、右、下、左四个方向，border-style设置边框的样式，常用的有solid、dashed、dotted等，border-color设置边框的颜色，与border-width一样可以设置上、右、下、左四个方向。例如下面的代码：
p {
border: 1px solid red;
}上述代码表示p元素的边框宽度为1px，样式为实线，颜色为红色。
总结：margin、padding、border三个属性可以用来控制元素的相对位置和样式，合理利用可以展示出更丰富的页面布局。当然也可以如下所示：
p {
margin: 10px;
padding: 20px;
border: 1px solid red;
}或
.myP {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
border-right-width: 2px;
border-right-style: dashed;
border-right-color: blue;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: green;
border-left-width: 4px;
border-left-style: double;
border-left-color: yellow;
}以上示例中的属性设置只是为了演示，实际应用中应该考虑到页面的布局和整体的美观性。