1

我在这个“小提琴”中的代码显示我有相邻的元素，这些元素的垂直边距正在相互折叠。我知道由于 css 中垂直边距的性质，选择了两者中最大的一个，在我的例子中是 p 标签。

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

4

3 回答 3

2

有一些技术可以防止边缘塌陷。您谈到了其中两个：绝对位置和浮动。此外，您可以使用display: inline-block您的p标签。在本指南中，我找到了仅适用于嵌套元素的边框和填充的解决方案。而且，当然，您可以使用非常大的边框而不是边距 :)

于 2012-11-13T22:58:32.070 回答
0

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

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

如果您确实包含边框或背景，则使用填充可能不会给出您想要的外观，因为边框在填充之外并且背景包括填充区域。

于 2012-11-13T22:31:59.337 回答
-1

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

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

div {
    padding: 1px;
    margin-top: 5px;
    display:inline;
}​
于 2012-11-13T22:19:42.967 回答