37

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

我了解该功能的目的，但我正在尝试进行布局，但我不知道如何将其关闭。

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

  1. 添加边框
  2. 添加填充

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

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

4

5 回答 5

27

好吧，您需要介于两者之间的东西来“打破”崩溃。

我的第一个想法是使用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>
于 2009-12-01T21:07:26.060 回答
16

从 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;
}
于 2013-06-17T09:38:34.090 回答
12

使用 Flex 或网格布局。

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

规格中的更多详细信息：

3. Flex Containers: flexand inline-flex display values

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

5.1。建立网格容器：grid和inline-grid 显示值

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

于 2017-09-29T20:46:46.693 回答
7

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

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

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

于 2009-12-01T21:40:53.853 回答
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。从这个小测试来看，Firefox 似乎考虑了0.1px填充。不过，0.05px似乎可以解决问题。

于 2016-02-24T09:52:17.917 回答