面板 保证金崩溃 规范在定义

doreamon999

边距时也定义了垂直边距折叠。从那时起，这种崩溃行为就一直是与保证金相关的挫败感的根源。如果您考虑到早期被用作文档格式语言，那么边距折叠是有道理的。边距折叠意味着当带有下边距的标题后面跟着带有上边距的段落时，这些项目之间不会出现巨大的间隙。 当边距折叠时，它们将合并，以便两个元素之间的空间成为两个边距中较大的一个。较小的边距基本上最终位于较大的边距内。 在以下情况下，边距会崩溃： 相邻的兄弟姐妹 完全空的盒子 父元素和第一个或最后一个子元素 让我们依次看一下这些场景，然后再看看在这些场景中防止利润崩溃的因素。 相邻兄弟姐妹我对边距折叠的最初描述是演示相邻兄弟姐妹之间的边距如何折叠。除了下面提到的情况之外，如果您有两个元素在正常流程中依次显示，则第一个元素的下边距将与后一个元素的上边距折叠在一起。 在下面的示例中，包含。

三个元素。第一个的顶部和底部边距均为像素。第二个的顶部和底部边距均为像素。第三个的顶部和底部边距均为 。前两个元素之间的边距为像素，因为较小的顶部边距与较大的底部边距相结合。后两个元素之间的边距为 ，因为大于第二个元素底部的个像素。 请参阅雷切尔· Whatsapp 号码列表 安德鲁 ()的《笔边距：相邻的兄弟姐妹》。 完全空的盒子如果一个盒子是空的，那么它的顶部和底部边距可能会相互折叠。在下面的示例中，空类元素的顶部和底部边距均为像素，但是第一个和第三个项目之间的间距不是像素，而是 。这是由于两个边距折叠所致。向该框中添加任何内容（甚至填充）将导致使用顶部和底部边距而不是折叠。 请参阅 的笔边距：空盒子。 父元素和第一个或最后一个子元素这是最常让人们出局的利润崩溃场景，因为它看起来并不特别直观。在下面的中，我有一个带有包装类的类，并且我。



将其标记为红色，以便您可以看到它在哪里。三个子元素的边距均为像素。然而，第一个和最后一个项目与包装纸的边缘齐平；元素和包装器之间没有像素的边距。 请参阅 的笔边距：第一个和最后一个子项的边距。 这是因为子项上的边距会与父项上的任何边距折叠在一起，从而最终位于父项的外部。如果您使用检查第一个子项，您可以看到这一点。突出显示的黄色区域是边距。 具有黄色突出显示边距的项目显示在父级之外可以帮助您了解利润最终去向 仅块边距折叠最后一个示例还强调了有关边距折叠的一些内容。在中，只有垂直边距被指定为折叠——如果处于水平书写模式，即元素的顶部和底部边距。因此上面的左右边距不会塌陷并最终超出包装纸之外。 注意：值得记住的是，边距仅在块方向上折叠，例如段落之间。 主体：+ 原生 组件与 . 完全兼容 尝试防止利润崩溃的事情如果项目具有绝对定位或浮动，边距永远。