CSS:为什么容器上的填充或边框会改变封闭浮动的行为?

发布于 2024-12-12 09:53:17 字数 1273 浏览 0 评论 0原文

有人可以向我解释为什么向容器元素添加填充或边框会影响浮动 div 的显示方式吗?

样品1& 4 显示我所期望的。样品2& 3 不。

这真是让我抓狂了!

它在 Webkit 和 FireFox 中的行为都很奇怪。没有测试过IE。

<div style="">
    <div style="border: 1px solid green; float: right;">This float is correct</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 1</h3>
    <p>Parent has nothing</p>
</div>

<div style="padding: 1px;">
    <div style="border: 1px solid green; float: right;">This float is incorrect</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 2</h3>
    <p>Parent has padding</p>
</div>

<div style="border: 1px solid red;">
    <div style="border: 1px solid green; float: right;">This float is incorrect</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 3</h3>
    <p>Parent has border</p>
</div>

<div style="padding: 1px;">
    <div style="border: 1px solid green; float: right;">This float is correct</div>
    <h3 style="margin: 0px 0px; border: 1px solid blue;">Sample 4</h3>
    <p>Parent has padding, H3 has no margin</p>
</div>

Can someone explain to my why adding either padding or border to a container element has an effect on how the floating div is displayed?

Sample 1 & 4 display how I expect. Sample 2 & 3 do not.

This is really driving me crazy!

It behaves strangely in both Webkit and FireFox. Have not tested IE.

<div style="">
    <div style="border: 1px solid green; float: right;">This float is correct</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 1</h3>
    <p>Parent has nothing</p>
</div>

<div style="padding: 1px;">
    <div style="border: 1px solid green; float: right;">This float is incorrect</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 2</h3>
    <p>Parent has padding</p>
</div>

<div style="border: 1px solid red;">
    <div style="border: 1px solid green; float: right;">This float is incorrect</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 3</h3>
    <p>Parent has border</p>
</div>

<div style="padding: 1px;">
    <div style="border: 1px solid green; float: right;">This float is correct</div>
    <h3 style="margin: 0px 0px; border: 1px solid blue;">Sample 4</h3>
    <p>Parent has padding, H3 has no margin</p>
</div>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

再浓的妆也掩不了殇 2024-12-19 09:53:17

您所看到的是“边距崩溃”,当两个元素彼此重叠时就会发生这种情况。它消失的原因是您向其中一个元素添加了边框或轮廓。来自 W3C:

在本规范中,折叠边距一词的意思是
相邻的边距(没有非空内容、填充或边框区域,或者
两个或多个盒子(可能紧挨着)的间隙将它们分开
彼此或嵌套)组合形成单个边距。

What you are witnessing is "margin collapse" which occurs when two elements are on top of each other. The reason it goes away is you add the border or outline to one of the elements. From the W3C:

In this specification, the expression collapsing margins means that
adjoining margins (no non-empty content, padding, or border areas, or
clearance separate them) of two or more boxes (which may be next to
one another or nested) combine to form a single margin.

复古式 2024-12-19 09:53:17

我认为实际上 2、3 和 4 都按照应有的方式渲染,而 1 看起来有点奇怪。

  • 1 标题的上边距在明确设置时被忽略。这有点奇怪,因为第一个示例中的 p 尊重 h3 的边距。将 overflow:hidden 添加到封装 div 似乎对其进行了排序,因此它尊重 h3 的边距。
  • 2 和 3 h3 的边距受到尊重
  • 4 您删除了边距槽样式。

I think actually 2, 3 and 4 are rendered like they should be and 1 looks a bit weird.

  • 1 the top margin of the header is ignored while it is clearly set. It is kind of weird since the p in the first example is respecting the margin of h3. Adding overflow: hidden to the encapsulating div seems to sort it so it respects the margin of h3.
  • 2 and 3 the margin of h3 is respected
  • 4 you removed the margin trough style.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文