如何解开保证金？ [复制]答案

【问题标题】：How do I uncollapse a margin? [duplicate]如何解开保证金？ [复制]
【发布时间】：2010-12-22 04:15:08
【问题描述】：

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

我了解purpose of the feature，但我正在尝试进行布局，但我不知道如何将其关闭。

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

添加边框
添加填充

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

有什么方法可以简单地禁用折叠而不需要将额外的像素推到布局中？我必须在视觉上影响文档才能改变这样的行为，这对我来说没有任何意义。

【问题讨论】：

相关：stackoverflow.com/questions/19718634/…

标签： css margin collapse

【解决方案1】：

你需要一些东西来“打破”崩溃。

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

所以我尝试了：

<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>

【讨论】：

在 Linux 上的 Firefox、Chrome、Opera 和 IE6 中为我工作。干得好，我正要发帖说这是不可能的......
似乎也适用于 IE6。令人惊讶的是，您需要额外的标记来完成此操作。
实际上，接近，但不完全在那里。边距仍在崩溃，它们只是没有相互崩溃。考虑：

.

.

.
就像一个点（我猜有点死灵，但是嘿）：你可以使用一个不间断的空间（&nbsp;）而不是一个句点来确保 div 永远不会出现.
补充@connec 提到的内容，使用&nbsp; 而不是. 可以防止在搜索引擎结果中出现页面描述的杂散期（多余的空格很可能会被去除，但是不一定是句号）。

【解决方案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;
}

【讨论】：

我不知道为什么，但这对我不起作用。
@norsewulf 为我工作。这是fiddle。
@norsewulf - 只有在容器中有额外的块元素时才有效。使用上面的特定代码，它之所以有效，是因为 div 中存在子 p 元素。如果您删除 p 元素或用 span 元素替换它们，则此解决方案是不可行的。 JSFiddle

【解决方案3】：

使用 Flex 或网格布局。

在 flex 和 grid 容器中，没有边距折叠这样的事情。

规格中的更多详细信息：

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

一个 flex 容器为其创建一个新的 flex 格式化上下文内容。这与建立块格式化上下文相同，除了使用 flex 布局而不是块布局。例如，浮动不会侵入 flex 容器，并且 flex 容器的边距不会与其内容的边距一起折叠。

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

一个网格容器为其创建一个新的网格格式化上下文内容。这与建立块格式化上下文相同，除了使用网格布局而不是块布局：浮动不侵入网格容器，并且网格容器的边距不折叠其内容的边缘。

【讨论】：

【解决方案4】：

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

有关他的方法，请参见图 6 之后的文章正文。他提到 1px 填充/边框通常是可行的方法，但为无法灵活添加额外像素的情况提供了一个非常简单的解决方案。

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

【讨论】：

【解决方案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 似乎可以解决问题。

【讨论】：

我见过的关于这个主题的最佳答案！
0.01px 避免在现代 FF (v66) 中崩溃。 0.001px 折叠。
0.01px 在 Chrome 中折叠，但 0.02px 不会。