Css 为什么我的利润率还在下降？

本文中的代码显示了相邻元素的垂直边距彼此折叠。我知道，由于css中垂直边距的性质，选择了其中最大的一个，在我的例子中是p标签

---

我遇到的问题是试图通过使用1px边框或1px填充来打破边距。我见过它与其他解决方法一起工作，例如

position:absolute

或

float

方法。我不明白为什么使用1px边框或填充不能正常工作以给我15px的空间。

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

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

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

---

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

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

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

---

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

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

---

如果确实包含边框或背景，则使用填充可能无法提供所需的外观，因为边框在填充之外，而背景包含填充区域。

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

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

---

---

如果确实包含边框或背景，则使用填充可能无法提供所需的外观，因为边框在填充之外，而背景包含填充区域。

有一些技术可以防止边距折叠。你说了其中两个：绝对位置和浮动。此外，您还可以对

p

标记使用

display:inline block

。在中，我找到了只对嵌套元素使用边框和填充的解决方案。当然，你可以用大边框代替边距：）

有一些技巧可以防止边距塌陷。你说了其中两个：绝对位置和浮动。此外，您还可以对

p

标记使用

display:inline block

。在中，我找到了只对嵌套元素使用边框和填充的解决方案。当然，你可以使用大边框而不是边距：）

OP不想让它们相邻显示OP不想让它们相邻显示最终我会遇到必须使用bg的情况，我想知道如何通过使用边框或填充来解决这个问题。嗯，只有在两个元素上都需要边框或背景时才有问题。例如，如果只是div，则在div上使用margin，在p上使用padding。还有其他方法。您可以使用浮动和清除、溢出或定位。这些解决方案可能有效，也可能无效，这取决于您的页面布局。这里有一篇很好的文章：关于它。最终我会遇到一种情况，我必须使用bg，我希望知道如何通过使用边框或填充来解决这个问题。好吧，只有在两个元素上都需要边框或背景时才有问题。例如，如果只是div，则在div上使用margin，在p上使用padding。还有其他方法。您可以使用浮动和清除、溢出或定位。这些解决方案可能有效，也可能无效，这取决于您的页面布局。这里有一篇很好的文章：关于它。那么你是说填充仅用于嵌套元素，对吗？@BrandonDorsey我已经尝试让它在一些变体中工作。我认为1px填充在你的情况下不起作用。但也许有人知道真正的技术。将div显示为内联块有助于实现20px的边缘间距。在这种情况下，您的右侧1px边界不起作用。它只在嵌套元素时才起作用。澄清一下：填充阻止嵌套元素中边距折叠的原因是填充出现在外边距和内边距之间。它不能防止两个相邻元素之间的边距折叠。所以你说填充仅用于嵌套元素，对吗？@BrandonDorsey我已经尝试在一些变体中使用它。我认为1px填充在你的情况下不起作用。但也许有人知道真正的技术。将div显示为内联块有助于实现20px的边缘间距。在这种情况下，您的右侧1px边界不起作用。它只在嵌套元素时才起作用。澄清一下：填充阻止嵌套元素中边距折叠的原因是填充出现在外边距和内边距之间。它不能防止边距在两个相邻图元之间塌陷。