边距和边框设置是网页排版布局中的常用设置。边距分为外边距和内边距。
CSS 盒模型的尺寸构成如下图所示：
一个盒模型占用的尺寸从内到外分别是宽度和高度(width,height,上图100x60部分)、内边距(padding上图10表示的部分)、边框(border上图20表示的部分)、外边距(margin上图30表示的部分)。
1、外边距margin
margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是margin-top，margin-right，margin-bottom，margin-left 四个外边距属性设置的简写。 四个边距属性可以设置任意其中单个或多个属性，也可以都不设置。也可以通过设置margin属性进行统一设置。设置margin时，可以设置单个值、两个值或者四个值。
当margin属性设置为单个值时：
//margin 属性设置单个值
margin:10px;
//此时等同于四个方向的值都设置为同样的值
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;当margin属性设置为两个值时：
//margin 属性设置两个值
margin:10px 20px;
//此时等同于上下方向和左右方向分别设置一个值
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;当margin属性设置为四个值时：
//margin 属性设置四个值
margin:10px 20px 30px 40px;
//此时等同于各方向单独设置一个值
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;外边距属性可以设置固定值(数值加上长度单位)，也可以使用百分比作为设置值，还可以设置为 auto。 当设置为auto时，由浏览器自己选择一个合适的外边距。在一些特殊情况下，auto可以使元素居中：
//css
.container {
width: 600px;
height: 400px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center {
width: 100px;
height: 60px;
padding: 10px;
margin: auto;
border: 20px solid black;
}
//html
<body>
<div class="container">
<div class="center">
</div>
</div>
</body>页面效果：
2、元素边框border
CSS的border属性用于设置各种单独的边界属性，可以设置一个或多个以下属性的值：
border-with：边框的宽度，可设置为确定的数值加单位的值，也可设置为 thin, medium, thick 对应从细到粗的宽度。
border-style：边框的样式，可以设置的值比较多，最常用的主要是 solid （实线）和 dashed （虚线）。
border-color：边框的颜色，可设置 rgba 值或者颜色字符串。默认与元素的 color 属性取值相同。
常用边框图示：
3、元素内边距padding
CSS的 padding 属性为给定元素设置所有四个（上下左右）方向的内边距属性。也就是padding-top，padding-right，padding-bottom，padding-left 四个内边距属性设置的简写。同外边距类似， 内边距可以设置任意其中单个或多个属性，也可以都不设置。也可以通过设置 padding 属性进行统一设置。设置 padding 时，可以设置单个值、两个值或者四个值。
当padding属性设置为单个值时：
//padding 属性设置单个值
padding:10px;
//此时等同于四个方向的值都设置为同样的值
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;当padding属性设置为两个值时：
//padding 属性设置两个值
margin:10px 20px;
//此时等同于上下方向和左右方向分别设置一个值
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;当padding属性设置为四个值时：
//padding 属性设置四个值
padding:10px 20px 30px 40px;
//此时等同于各方向单独设置一个值
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;内边距属性可以设置固定值(数值加上长度单位)，也可以使用百分比作为设置值，但不能使用负值。
4、元素总高度和总宽度box-sizing
CSS中的box-sizing属性定义了应该如何计算一个元素的总宽度和总高度。在CSS盒子模型的默认定义里，对元素设置width和height只会应用到这个元素的内容区。如果这个元素有任何的padding或者border，绘制到页面上的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。box-sizing 属性可以被用来调整这种高度和宽度的计算方法。
box-sizing: content-box; 默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
box-sizing: border-box; 设置的边框和内边距的值是包含在width和height内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们能够更容易地设定一个元素的宽高。
<html>
<head>
<meta charset="utf-8">
<title>元素边框设置</title>
<style type="text/css">
.container {
width: 600px;
height: 400px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.item {
width: 300px;
height: 100px;
border: 10px solid red;
padding: 20px;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: aquamarine;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="item content-box">
box-sizing: content-box;
</div>
<div class="item border-box">
box-sizing: border-box;
</div>
</div>
</body>
</html>页面显示效果：
可见当设置 box-sizing: content-box; 时，元素所占区域的尺寸明显大了一圈，因为他加上了border和padding的尺寸。而当设置 box-sizing: border-box; 时，元素所占区域范围都限定在了width和height属性设置的区域内。
大部分的时候我们可以直接设置 *｛box-sizing: border-box; ｝方便布局排版。
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
