CSS margins（边距）被用于创建元素周围的空间，与边框(padding)和内容(content)一起，构成一个元素的框(box)。
CSS的margin属性是布局中最基础的一种属性，通过设置边距来控制元素之间的距离和对齐方式。在前端开发中，掌握margin的使用方法和技巧可以帮助我们实现代码更有效、模块化、易维护的布局。
一、margin的基本使用
1、margin属性
CSS的margin属性可以为0或正值，分别表示不设置边距或设置边距距离周围元素的距离的大小。
例如：
.box {
margin: 20px;
}
这段代码将会把.box元素的四个边距都设置为20px。
2、margin的缩写属性
margin属性也可以使用缩写和明确的值来设置单独的边距。
例如：
.box {
margin: 20px 10px;
}
这段代码将会把.box元素的上、下边距设置为20px，左、右边距设置为10px。
3、margin的百分比
margin属性的值也可以为百分比。
例如：
.box {
margin: 20%;
}
这段代码将会把.box元素的边距设置为父元素宽度的20%。
二、margin的负值应用
1、margin的负值
margin属性也可以为负数，可以用来使元素重叠。
例如：
.box1 {
margin: 0 0 20px 0;
}
.box2 {
margin: -10px 0 0 0;
}
这段代码中，.box1元素的下边距为20px，而.box2元素的上边距为-10px，则.box2会重叠在.box1的下面20px-10px=10px的位置上。
2、margin负值的应用
margin的负值也可以用于实现一些常用的布局方式，比如让一个元素平移一定距离、在一个容器中的竖直居中等。
例如，下面代码实现了一个正方形内嵌在一个圆形中：
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
}
.square {
width: 150px;
height: 150px;
border-radius: 10px;
background-color: #fff;
margin: -20px;
}
这段代码中，.circle元素的宽高分别为200px，且设置了50%的圆角；.square元素作为.circle元素的子元素，在上下左右都设置了-20px的边距。这样就使.square通过负边距向外扩展了20px，成了一个内部为正方形的圆形。
三、margin的自动计算
1、margin的自动计算
margin同样可以通过特定的形式来计算，以实现元素的居中对齐。
例如：
.box {
margin: 0 auto;
width: 200px;
}
这段代码将会把.box元素设置为200px宽，并在页面中横向居中对齐。
2、margin的其他自动计算形式
margin的自动计算形式并不止这种，还有类似于margin-top:auto & margin-bottom:auto和margin-left:auto & margin-right:auto等形式。
例如：
.box {
margin-top: 30%;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 200px;
}
这段代码将会把.box元素的上边距设置为父元素高度的30%，同时左右边距自动计算，并设置宽高为200px和300px。
四、总结
上述是CSS margins HTML的使用方法及相关技巧。运用好margin属性，可以获得自然的布局效果和简洁的代码风格。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/283447.html
微信扫一扫 
支付宝扫一扫 