Question

在CSS中折叠边距：http://www.w3.org/TR/CSS21/box.html#collapsing-margins

我理解purpose of the feature，但我正在尝试进行布局，而我无法弄清楚如何将其关闭。

CSS教程中通常解释的方法是：

添加边框
添加填充

当您使用背景图像和固定填充处理像素完美布局时，所有这些都会产生明显的副作用。

有没有办法简单地禁用折叠而不必将额外的像素推入布局？对我来说，必须在视觉上影响文档才能改变这样的行为。

Answer 1

你需要介于两者之间来“打破”崩溃。

我的第一个想法是使用中间设置display:none的div，但这似乎不起作用。

所以我试过了：

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

这似乎做得很好（至少在Firefox中，没有安装Internet Explorer来测试它......）

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

Answer 2

从IE8你可以做到：

<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

使用CSS：

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

Answer 3

Eric Meyer在他的文章Uncollapsing margins中提到了你的确切观点。

参见图6后的文章，了解他的方法。他提到1px填充/边框通常是要走的路，但是对于添加额外像素没有灵活性的情况提供了一个非常简单的解决方案。

它涉及手动覆盖每个元素的边距，所以我不确定它是否适用于您的特定情况。

Answer 4

使用Flex或网格布局。

在flex和grid容器中，没有边缘折叠的情况。

规格中的更多细节：

3. Flex Containers: the flex and inline-flex display values

Flex容器为其创建一个新的flex格式化上下文   内容。这与建立块格式化上下文相同，   除了使用flex布局而不是块布局。例如，   浮子不会侵入柔性容器和弯曲   容器的边距不会随其内容的边缘而崩溃。

5.1. Establishing Grid Containers: the grid and inline-grid display values

网格容器为其建立新的网格格式化上下文   内容。这与建立块格式化上下文相同，   除了使用网格布局而不是块布局：浮动没有   侵入网格容器，网格容器的边距   不会因其内容的边缘而崩溃。

Answer 5

根据我所知，禁用边缘折叠的一个巧妙方法就是将父级的填充设置为0.05px：

.parentClass {
    padding: 0.05px;
}

填充不再为0，因此不再发生折叠，但同时填充足够小，从视觉上它将向下舍入为0.

如果需要其他填充，则仅将填充应用于不需要边距折叠的“方向”，例如padding-top: 0.05px;。

工作示例：

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

修改：将值从0.1更改为0.05。从this small test开始，Firefox似乎考虑了0.1px填充。虽然，0.05px似乎可以做到这一点。

如何解开保证金？

5 个答案: