css 如何取消收合边界？[duplicate]

lb3vh1jj 于 2022-11-19 发布在其他

关注(0)|答案(5)|浏览(154)

此问题在此处已有答案：

How to disable margin-collapsing?（12个答案）
三年前就关门了。
在CSS中折叠边距：http://www.w3.org/TR/CSS21/box.html#collapsing-margins
我理解purpose of the feature，但我正在尝试布局，我不知道如何关闭它。
CSS教程中通常解释的方法是：
1.添加边框
1.添加填充
所有这些都有副作用，当您处理具有背景图像和固定填充的完美像素布局时，这些副作用会变得很明显。
有没有什么方法可以简单地禁用折叠，而不必将额外的像素推到布局中？对我来说，必须在视觉上影响文档才能像这样改变行为是没有任何意义的。

css

来源：https://stackoverflow.com/questions/1828804/how-do-i-uncollapse-a-margin

5条答案

按热度按时间

xiozqbni1#

那么你需要一些东西在中间“打破”崩溃。
我第一个想法是使用一个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>

赞(0）回复(0）举报 2022-11-19

r9f1avp52#

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

赞(0）回复(0）举报 2022-11-19

oxcyiej73#

使用Flex或网格布局。
在Flex和网格容器中，没有边距折叠这回事。
更多详细信息请参见规格：

3.弹性容器：flex和inline-flexdisplay的值

Flex容器为其内容建立新的Flex上下文。这与建立块格式上下文相同，只是使用Flex布局而不是块布局。例如，浮动不会侵入Flex容器，Flex容器的边距不会随其内容的边距折叠。

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

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

赞(0）回复(0）举报 2022-11-19

643ylb084#

Eric Meyer在他的文章Uncollapsing margins中提到了你的确切观点。
他提到1 px填充/边框是一种典型的方法，但是对于添加额外像素没有灵活性的情况，他提供了一个非常简单的解决方案。
它涉及手动覆盖每个元素的边距，所以我不确定它是否适用于您的特定情况。

赞(0）回复(0）举报 2022-11-19

ojsjcaue5#