如何取消折叠边距？

Question

如何取消折叠边距？

cssmargin

39

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

我理解这个功能的目的，但我正在进行布局，而且我无法弄清如何关闭它。

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

添加边框
添加内边距

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

是否有一种简单的方法可以禁用折叠而不必将额外的像素塞入布局中？我没有必要通过视觉影响文档来更改这种行为。

- Alex J

相关链接：https://dev59.com/aGIj5IYBdhLWcg3w95gc - Timo Huovinen

5个回答

17

从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;
}

- andraaspar

2

我不确定为什么，但这对我不起作用。 - norsewulf

@norsewulf 对我来说没问题。这是一个 fiddle。 - andraaspar

2

@norsewulf - 只有在容器内存在其他块级元素时才起作用。由于div内存在子p元素，因此上述特定代码可以工作。如果您删除p元素或将其替换为span元素，则此解决方案是不可行的。 [JSFiddle]（https://jsfiddle.net/clarketm/y9VAu/11/） - Travis Clarke

12

使用Flex或Grid布局。

在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

Grid容器为其内容建立了一个新的Grid格式化上下文。这与建立块级格式化上下文相同，只是使用Grid布局而不是块布局：浮动不会侵入Grid容器，Grid容器的边距也不会与其内容的边距重叠。

- Michael Benjamin

7

Eric Meyer在他的文章《Uncollapsing margins》中提到了你所说的问题。

在第6张图片后面，可以看到他的解决方法。他提到1像素的填充/边框通常是可行的，但也提供了一个相当简单的解决方案，适用于没有灵活性添加额外像素的情况。

然而，这需要手动覆盖每个元素的边距，因此我不确定它是否适用于你的特定情况。

- Mark Hurd

6

一种有效的方法来禁用边距折叠，且没有视觉影响，据我所知，就是将父元素的内边距设置为0.05px。

.parentClass {
    padding: 0.05px;
}

填充值不再为0，因此不会再发生margin折叠，但同时填充值足够小以至于在视觉上会被舍去到0。

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

Working example:

.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似乎可行。

- Nicu Surdu

我所见过的关于这个主题的最佳答案！ - Steven Vachon

0.01像素在现代Firefox（v66）中避免了折叠。0.001像素会折叠。 - Victoria

0.01像素在Chrome中会折叠，但0.02像素不会。 - Victoria

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zenon · Accepted Answer

你需要在文本之间加入一些内容来 "打破" 折叠。

我最初的想法是使用一个带有 display:none 属性的 div，但似乎没有起作用。

所以我尝试了：

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

这个方法看起来很好用（至少在火狐浏览器中是这样，我这里没有安装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>