题
这个问题已经有一个答案在这里:
- 如何禁用保证金的崩溃? 9答案
崩溃边CSS: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
我明白的 目的特征, 但我在尝试做的布局,并且我不知道怎么把它关闭。
这种方式通常解释CSS教程是:
- 增加一个边界
- 增加一个填充
所有这些具有负面影响,变得明显,当你处理完美的像素的布局与背景图像和固定垫.
是否有任何方式只是禁止的崩溃,而不必推额外像素进入布局?它没有任何意义我有视觉上的影响的文献来改变行为这样的。
解决方案
好吧你需要的东西之间的"突破"的崩溃。
我首先想到的是使用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做的伎俩。