当前位置：文江博客话题详情

如何展开边距？

发布于 2024-08-12 15:12:10 字数 518 浏览 21 评论 0原文

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

我理解该功能的目的，但我正在尝试进行布局，但我不知道如何关闭它。

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

添加边框
添加填充

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜血缘 2024-08-19 15:12:10

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

我的第一个想法是使用一个 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>

well you need something in between to "break" the collapsing.

my first thought was to use a div with display:none set in between, but that doesn't seem to work.

so I tried:

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

which seems to do the job nicely (at least in firefox, don't have internet explorer installed here to test it...)

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

回复收藏 0 原文

半衬遮猫 2024-08-19 15:12:10

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

From IE8 you could do:

<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

With CSS:

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

回复收藏 0 原文

叫嚣ゝ 2024-08-19 15:12:10

使用 Flex 或 Grid 布局。

在 Flex 和网格容器中，不存在边距折叠这样的事情。

规格中的更多详细信息：

3. Flex 容器：flex 和 inline-flex display
价值观
Flex 容器为其建立一个新的 Flex 格式化上下文
内容。这与建立块格式化上下文相同，
只不过使用了弹性布局而不是块布局。例如，
浮动不会侵入柔性容器，并且柔性
容器的边距不会与其内容的边距折叠。
5.1。建立网格容器：grid 和 inline-grid
展示
价值观
网格容器为其建立一个新的网格格式化上下文
内容。这与建立块格式化上下文相同，
除了使用网格布局而不是块布局：浮动不
侵入网格容器，并且网格容器的边距
不与其内容的边距一起折叠。

回复收藏 0 原文

猫卆 2024-08-19 15:12:10

Eric Meyer 在他的文章Uncollapsing margins 中引用了您的确切观点。

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

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

回复收藏 0 原文

撩心不撩汉 2024-08-19 15:12:10

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

.parentClass {
    padding: 0.05px;
}

填充不再为 0，因此折叠不会再发生但同时填充足够小，在视觉上它会向下舍入到 0。

如果需要其他填充，则仅将填充应用于不需要边距折叠的“方向”，例如 padding-顶部：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 似乎可以解决问题。

One neat trick to disable margin collapsing that has no visual impact, as far as I know, is setting the padding of the parent to 0.05px:

.parentClass {
    padding: 0.05px;
}

The padding is no longer 0 so collapsing won't occur anymore but at the same time the padding is small enough that visually it will round down to 0.

If some other padding is desired, then apply padding only to the "direction" in which margin collapsing is not desired, for example 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>

Edit: changed the value from 0.1 to 0.05. From this small test, it seems that Firefox takes the 0.1px padding into consideration. Though, 0.05px seemes to do the trick.

回复收藏 0 原文

~没有更多了~