[分享]css两个盒子之间的间距

CSS 中，盒子间的间距通常可以使用 margin 属性来设置。margin 属性可以设置每个方向的外边距，如上（margintop）、下（marginbottom）、左（marginleft）和右（...

CSS 中，盒子间的间距通常可以使用 margin 属性来设置。margin 属性可以设置每个方向的外边距，如上（margin-top）、下（margin-bottom）、左（margin-left）和右（margin-right）。
如果要同时设置所有方向的外边距，可以使用简写形式：

css
margin: 10px; 

上述代码将所有方向的外边距都设置为 10 像素。如果只想统一设置上下边距，可以使用以下代码：

css
margin-top: 10px;
margin-bottom: 10px; 

如果要将两个盒子之间的间距设置为特定值，可以给其中一个盒子设置 margin-bottom，给另一个盒子设置 margin-top，如下所示：

css
.box1 {
  margin-bottom: 20px;
}
<br>
.box2 {
  margin-top: 20px;
} 

上述代码将在 box1 和 box2 之间创建一个 20 像素的间距。注意，这里的数值可以根据自己的需要进行调整。
需要注意的是，当两个相邻的盒子 margin-top 和 margin-bottom 都设置为非零值时，实际上它们之间的间距不是两个 margin 值之和，而是两个值中的最大值。这被称为 margin 合并现象。
因此，如果想要两个盒子之间的间距确切地达到某个值，可以使用其他方法，例如给其中一个盒子设置 padding 或 border。这些值不会影响 margin 合并，因此可以确保盒子之间的间距得到精确的控制。
总之，在设置两个盒子之间的间距时，需要考虑到 margin 合并现象，以及 padding 和 border 的影响，从而选择最合适的方法来达到想要的效果。