CSS Margins HTML

一、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属性，可以获得自然的布局效果和简洁的代码风格。