Working with CSS Transforms, Overflow, and Filters - What Is Margin Collapsing, and How Does It Work?

HTML-CSS
1

Tell us what’s happening:

Which of the following will NOT prevent margin collapsing between a parent and its first child?

Adding a border to the parent.

Setting padding-top: 1px; on the parent.

Using display: inline-block; on the child.
Incorrect.

Think about which properties create a separation between the parent and child margins.

Setting margin-top: 0; on the child.
Why my answer is false? (The third one)

Your browser information:

User Agent is: Mozilla/5.0 (iPad; CPU OS 18_5_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/138.0.7204.119 Mobile/15E148 Safari/604.1

Challenge Information:

Working with CSS Transforms, Overflow, and Filters - What Is Margin Collapsing, and How Does It Work?

2

because that one prevents the margin from collapsing

from the transcript

Margins can also collapse between a parent element and its first or last child. If there’s no border, padding, inline content, or clearance to separate the parent’s margin from the child’s, they will collapse.

3

I’m a bit confused. My understanding is that setting display: inline-block on the child doesn’t introduce any physical separation like a border, padding, or content would. So why would it prevent margin collapsing?

Also, the correct answer is “Setting margin-top: 0; on the child.” But in this case, there’s no margin to collapse — which means there’s nothing to prevent. It simply removes the margin entirely.

Am I missing something in how inline-block changes margin behavior

4

it becomes an inline-element, so it has different behaviour from a block element

here see:

image
image1275×721 18.4 KB

the code is

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

<div class=parent>
  <div class="child inline"></div>
</div>

div {
  background-color: yellow;
  height: 100px;
  margin: 22px;
}
div > div {
  background-color: red;
  height: 50px;
}

.inline {
  display: inline-block;
  width: 50px;
}

so you can test yourself

5

Hi Wafaa!

You can read more about margin collapsing behaviour here

The important bit to note:

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

And from reading about “block formatting context” you can find out that inline-blocks (elements with display: inline-block) create a context which then stops the margin collapse.

6

You mistakenly think that “display: inline-block; will prevent collapse”, but in fact: it will not break margin collapse between parent and child.

To break margin collapse, you need padding, border, overflow, display: flow-root, etc. to form BFC (block formatting context).

7

hi there,

display: inline-block does create a BFC as mentioned earlier.

(you can read the MDN documentation for a reference to that)

8

I have a question on a content of the lesson I shared below:

If an element has no content, padding, or border, its top and bottom margins can collapse into a single margin.

<style>
  .empty-block {
    margin-top: 20px;
    margin-bottom: 10px;
    height: 0;
  }
  .next-block {
    background-color: lightgray;
  }
</style>

<div class="empty-block"></div>
<div class="next-block">Next block</div>

In this example the empty-blocks top and bottom margins collapse into a single 30 pixels margin, the larger of the two.

If margin collapsing happens between top and bottom of .empty-block as stated in the last paragraph, shouldn’t it be 20 px (collapsed into larger of 20px and 10px) ?

(The problem could come from my english, not native, but alongside I asked to three ai who all agreed with my thought.)

9

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

1 Like