Question

我在此"Fiddle"中的代码显示我有相邻的元素，其中垂直边距相互折叠。据我所知，由于css中垂直边距的性质，选择了两者中最大的一个，在我的例子中是p标签。

我遇到的问题是尝试使用1px边框或1px填充来突破边距。我已经看到它与其他解决方法一起使用，例如position:absolute或float方法。我不明白为什么使用1px边框或填充不能正常工作给我15px的空间。

Answer 1

有一些技术可以防止边缘崩溃。你说其中两个：绝对位置和浮动。此外，您可以对display: inline-block代码使用p。在this guide中，我发现只有嵌套元素的边框和填充的解决方案。当然，你可以使用非常大的边框而不是边距：）

Answer 2

您是否希望在p或div上使用边框或背景？如果没有，请在一个或两个样式中使用填充。填充不像边距那样崩溃。

p {
    padding-bottom: 10px;
}
div {
    padding: 1px;
    margin-top: 5px;
}

如果包含边框或背景，使用填充可能无法显示您想要的外观，因为边框位于填充之外，背景包括填充区域。

Answer 3

要使它们彼此相邻显示，请更改以下内容：

p {
    margin-bottom: 10px;
    display:inline;
}

div {
    padding: 1px;
    margin-top: 5px;
    display:inline;
}