css边距的接触

CSS中的边距接触指的是两个或多个盒模型(box model)相邻的边距(margin)相接触时发生的情况。在CSS中，当垂直相邻元素的垂直外边距(margin-bottom和margin-top)相遇时，它们会形成一个外边距合并（也被称为垂直外边距合并或 collapse）。这种合并会导致两个外边距中较大的一个来确定这两个盒子间的距离。

解决方法：

1. 使用边框(border)或内边距(padding)来分隔相邻的元素，避免外边距合并。
2. 使用CSS属性overflow设置为auto或scroll，可以触发BFC(Block Formatting Context)，避免外边距合并。
3. 使用CSS属性display设置为inline-block、flex或grid，可以使元素在不合并外边距的情况下并排排列。
4. 使用margin-top和margin-bottom为负值，可以手动调整外边距使之不合并。

示例代码：

/* 使用内边距分隔相邻元素 */
.element + .element {
  padding-top: 10px; /* 或者其他非零值 */
}
 
/* 使用overflow触发BFC */
.element {
  overflow: auto; /* 或者 'scroll' */
}
 
/* 使用display属性使元素并排 */
.element {
  display: inline-block; /* 或者 'flex', 'grid' */
}
 
/* 使用负外边距调整 */
.element + .element {
  margin-top: -10px; /* 需要根据具体情况调整 */
}