我怎么不折叠一个保证金？[重复]

StackOverflow https://stackoverflow.com/questions/1828804

  •  11-09-2019
  •  | 
  •  

题

这个问题已经有一个答案在这里：

崩溃边CSS: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

我明白的 目的特征, 但我在尝试做的布局，并且我不知道怎么把它关闭。

这种方式通常解释CSS教程是：

  1. 增加一个边界
  2. 增加一个填充

所有这些具有负面影响，变得明显，当你处理完美的像素的布局与背景图像和固定垫.

是否有任何方式只是禁止的崩溃，而不必推额外像素进入布局？它没有任何意义我有视觉上的影响的文献来改变行为这样的。

有帮助吗？

解决方案

好吧你需要的东西之间的"突破"的崩溃。

我首先想到的是使用div display:none 设之间，但是，似乎没有工作。

所以，我尝试：

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

这似乎做的工作很好地(至少在火狐，没有互联网资源管理器安装在这里，以测试它...)

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

其他提示

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

使用Flex或格局。

在flex和格的容器，也没有这样的东西作为保证金崩溃。

更详细的规格：

3.Flex容器：的 flex 和 inline-flex display 值

Flex容器建立了一个新的flex格式方面对它 内容。这是一样建立一个框格式方面， 除了flex的布局使用而不是块的布局。例如， 漂浮不会侵入到flex的容器中，并flex 容器的利润不崩溃的边缘的其内容。

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

格容器内建立了一个新的网格格式化方面对它 内容。这是一样建立一个框格式方面， 除了这一网络布局而不是使用框布局：漂浮不 侵入网格的容器，和格容器的利润做 不崩溃的边缘的其内容。

埃里克*迈耶指的是你的确切点在他的文章 展开群的利润.

看到该文本的文章之后，图6为他的做法。他提到，1px填充/边境是一般的路要走，但提供了一个很简单的解决方案实例，那里没有灵活性在增加，额外像素。

它涉及到手动压倒一切的利润每个元素，所以我不确定它是否会工作的你的特定情况。

一个巧妙的方法，以禁用保证金的崩溃，已经没有视觉上的影响，尽我所知道的，是设的填充的父母 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 seemes做的伎俩。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top