Css 我如何打开一个空白？

折叠CSS中的页边距：

我理解，但我正在做布局，我不知道如何关闭它

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

添加边框

添加一个填充

所有这些都有副作用，当你处理带有背景图像和固定填充的像素完美布局时，副作用变得很明显

---

有没有什么方法可以简单地禁用折叠，而不必在布局中添加额外的像素？对我来说，通过视觉影响文档来改变这样的行为是没有任何意义的。

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

我的第一个想法是使用一个div，中间设置了

display:none

，但这似乎不起作用

所以我试着：

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

。

这似乎做得很好（至少在firefox中，这里没有安装internet explorer来测试它…）

.
.
.

Eric Meyer在他的文章中提到了你的确切观点

关于他的方法，请参见图6后面的文章文本。他提到1px填充/边框是一种典型的方法，但对于无法灵活添加额外像素的情况，它提供了一个非常简单的解决方案

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

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

---

据我所知，禁用没有视觉影响的边距折叠的一个巧妙技巧是将父级的填充设置为

0.05px

：

.parentClass {
    padding: 0.05px;
}

填充不再为0，因此不再发生折叠，但同时填充足够小，从视觉上看，它将舍入为0

如果需要某些其他填充，则仅将填充应用于不需要边距折叠的“方向”，例如

padding top:0.05px

工作示例：
.noCollapse{
填充：0.05px；
}
.家长{
背景色：红色；
宽度：150px；
}
.儿童{
边缘顶部：50px；
背景色：石灰；
宽度：100px；
高度：100px；
}
边框折叠
没有边界崩溃
使用柔性或网格布局

在flex和grid容器中，没有边距塌陷这样的事情

规范中的更多详细信息：


flex容器为其容器建立新的flex格式上下文
目录这与建立块格式上下文相同，
除了使用flex布局而不是块布局之外。例如
浮动不会侵入flex容器，flex
容器的边距不会与其内容的边距一起折叠


网格容器为其网格建立新的网格格式上下文
目录这与建立块格式上下文相同，
除了使用栅格布局而不是块布局之外：浮动不使用
侵入网格容器，网格容器的边距会
不会随内容的边距一起折叠

在Linux上的Firefox、Chrome、Opera和IE6中对我有效。干得好，我正要发帖说这是不可能的…似乎在IE6中也能工作。令人惊讶的是，你需要额外的标记来完成这项工作。事实上，很接近，但不完全如此。利润率仍在下降，只是彼此之间没有下降。考虑：。作为一个要点（我想有点像necro，但是嘿）：你可以使用一个不间断的空格（
）而不是一个句点来确保div永远不会出现。为了增加@connec提到的内容，使用
而不是
可以防止搜索引擎结果中的页面描述出现一个错误的句点（额外的空间很可能会被剥离，但不一定是一段时间）。我不知道为什么，但这对我不起作用。@norsewulf对我起作用。这里有一个。@norsewulf-它只在容器中有一个额外的块元素时起作用。对于上面的特定代码，它起作用是因为div中存在子p元素。如果删除p元素或用span元素替换它们，那么lution是不可侵犯的。相关：这是我在这个主题上见过的最好的答案！0.01px在现代FF（v66）中避免崩溃。0.001px在Chrome中崩溃。0.01px在Chrome中崩溃，但0.02px没有。
.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

.parentClass {
    padding: 0.05px;
}