钳制边距 - CSS

什么是钳制边距？

钳制边距是指在某些条件下，浏览器会自动将元素的外边距缩小到与相邻元素的最小外边距相等的现象。这可能会导致布局出现问题，因为预期的外边距大小并没有被保留。

如何解决钳制边距？

方法一：使用 padding 代替 margin

将元素的外边距改为内边距，这样就不会受到钳制边距的影响了。

.element {
  padding: 20px;
}

方法二：使用 overflow

将元素的 overflow 属性设置为 auto 或 hidden，这样就可以解决钳制边距的问题。

.element {
  overflow: auto;
}

方法三：使用 border

在元素外层嵌套一个具有非零边框宽度的容器。

.wrapper {
  border: 1px solid transparent;
}

.element {
  margin: 20px;
}

总结

钳制边距可能会导致布局出现问题，但使用 padding、overflow 或 border 可以轻松解决这个问题。