防止子元素的边距移动父元素CSS

有时候，当你在父元素中使用 margin 或 padding 时，你会注意到你的子元素的外边距在移动父元素。但是在某些情况下，我们希望子元素的外边距保持在自己的范围内，而不是在父元素中移动。

这里有一些方法可以帮助你防止子元素的边距移动父元素CSS。

1. 使用border

你可以为父元素添加一个与子元素相同的边框。这将从父元素边框内部开始，使子元素的外边距无处可去。下面是一个例子：

.parent {
  border: 10px solid white;
}

.child {
  margin: 20px;
}

2. 使用padding

你可以为父元素添加一个相同数量的内边距。这将从父元素内部开始，使子元素的外边距无处可去。下面是一个例子：

.parent {
  padding: 10px;
}

.child {
  margin: 20px;
}

3. 使用overflow

你可以将父元素的 overflow 属性设置为 hidden。这将隐藏超出父元素高度的任何子元素的外边距。下面是一个例子：

.parent {
  overflow: hidden;
}

.child {
  margin: 20px;
}

这些方法应该可以帮助你防止子元素的边距移动父元素CSS。希望这些技巧对你有帮助！