为什么元素的负底部边距会降低该元素的父元素的高度？ [英] Why does a negative bottom margin on an element decrease the height of parent of that element?

问题描述

这可能是由于保证金崩溃，我知道保证金崩溃，至少它如何影响相邻的元素，但我不明白如果它涉及到负的利润，它是如何工作在嵌套的元素。

例如，在此标记和随附的CSS中：

标记

 < div class =parent> 
< div class =child> 
孩子1 
< / div> 
< / div> 
 
< div class =parent> 
< div class =child negative> 
孩子1 
< / div> 
< / div> 
  

CSS

  body {
 background：white; 
 padding：45px; 
} 
 
 .parent {
 border：1px solid black; 
 margin-bottom：10px; 
} 
 
 .negative {
 margin-bottom：-1px; 
} 
  

实例这里。

当我检查第二个 .parent div，我注意到它比第一个小1个像素。这是因为其中的 .negative 元素的负边距。我快速地看了一下W3C，找不到这个行为的解释。

有人可以解释一下这里发生了什么，还提供了一个链接到W3C spec section about it？

解决方案

这可能是由于利润率崩溃， ，至少它如何影响相邻的元素，但是我不明白当负边距涉及嵌套元素时如何工作。

第8.3.1节具有所有详细信息。

但是，你在这里看到的不是 因为您已在 .parent 规则中以边框：1px实心黑色声明取消了边缘崩溃的效果。这意味着有一个边界可以阻止您的 .parent 保证金与您的 .child.negative 保证金折合。 p>

相反，这只是负边距的工作原理。这是在视觉格式化模型的各个部分，但它最简洁，直接解决在 Section 11 ，其总结如下：

通常，块框的内容限于内容边的盒子。在某些情况下，框可能溢出，意味着它的内容部分地或完全地在框外部，例如：

• ...
• 
  
• 子孙框有负边距
  

因此，这里发生了什么，而是是

1. .child.negative 的绝对值，元素的负边距从 .parent 元素的实际高度中减去（ 1px ）。




2. 因此， .child.negative 元素本身溢出 .parent （因为其自身的高度没有改变，任何 div 的默认溢出都是 visible




3. 由于边距折叠在这里不会生效， margin-bottom： code>在 .parent 中不受影响。注意，虽然正常流中的任何后续元素将向上移动 1px ，这主要是由于您的 .child.negative element;换句话说，步骤1的副作用。




这是所有的东西。

This might be due to margin collapsing and I know about margin collapsing, at least how it affects adjacent elements, but I don't understand how it works on nested elements when negative margins are involved.

For example, in this markup and accompanying CSS:

Markup

<div class="parent">
  <div class="child">
    Child 1
  </div>
</div>

<div class="parent">
  <div class="child negative">
    Child 1
  </div>
</div>

CSS

body {
  background: white;
  padding: 45px;
}

.parent {
  border: 1px solid black;
  margin-bottom: 10px;
}

.negative {
  margin-bottom: -1px;
}

Live example here.

When I inspect the height of the second .parent div, I notice it is 1 pixel less than the first one. This has happened because of the negative margin on the .negative element inside it. I had a quick look at W3C and couldn't find an explanation for this behavior.

Could someone please explain what's happening here and also provide me with a link to the W3C spec section about it?

解决方案

This might be due to margin collapsing and I know about margin collapsing, at least how it affects adjacent elements, but I don't understand how it works on nested elements when negative margins are involved.

Section 8.3.1 has all the details. It also covers the behavior of adjoining margins between nested boxes, as well as negative margins.

However, what you're seeing here is not the effect of margin collapse because you have negated it with a border: 1px solid black declaration in your .parent rule. That means having a border there prevents your .parent margin from collapsing with your .child.negative margin altogether.

Rather, this is simply how negative margins work. This is covered in various sections of the visual formatting model, but it's most succinctly and directly addressed in the beginning of Section 11, which summarizes it thus:

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

• ...
• A descendant box has negative margins, causing it to be positioned partly outside the box.

So what's happening here, instead, is:

1. The absolute value of the .child.negative element's negative margin is subtracted from the .parent element's actual height (by 1px).

2. As a result, the .child.negative element itself overflows .parent (because its own height is not changed and the default overflow for any div is visible).

3. Since margin collapse does not take effect here, the margin-bottom: 10px in your .parent is unaffected. Note that while any subsequent elements in normal flow will be shifted up by 1px, this is mainly due to the negative margin of your .child.negative element; in other words, a side effect of step 1.

And that's all there is to it.

这篇关于为什么元素的负底部边距会降低该元素的父元素的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！