1

As far as I know, overflow: hidden and display:inline-block can both establish a new blocking format context,and blocking format context can prevent margin collapse.

But overflow:hidden can’t prevent margin collapsing between sibling divs as display:inline-block. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .div1 {
      background-color: red;
      margin-bottom: 100px;
    }
    
    .div2 {
      background-color: orange;
      margin-top: 200px;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</body>

</html>

I wished the overflow:hidden on .div2 can establish a block format context and the margin between .div1 and .div2 should be 300px. But it didn't work. Why?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
T.T
  • 321
  • 2
  • 10
  • What is the question here? – disinfor Jan 01 '19 at 16:01
  • show the code of such sitatuion. There is no margin collapsing between inline-block element with or without oveflow hidden – Temani Afif Jan 01 '19 at 16:04
  • @disinfor why overflow:hidden can’t prevent collapsing margin as display:inline-block? they both establish a block format context. – T.T Jan 01 '19 at 16:05
  • @TemaniAfif hi, I just added the codes. Now I understand that no margin collapsing between inline-block elements. But I still don’t know why overflow:hidden won’t work as I expected. – T.T Jan 01 '19 at 16:15

1 Answers1

0

Margins between sibling block formatting contexts established by block boxes don't intrude into either context, so margin collapsing is allowed to happen as normal. The kind of margin collapsing that's prevented by creating a new BFC is that between the parent that establishes the BFC, and any in-flow block-level child boxes.

The reason margins between inline-blocks don't collapse is not because they establish block formatting contexts, but because margins between siblings only collapse when they are block-level boxes, never when they are inline-level boxes (inline, inline-block, inline-table or whatever).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thx. Now I almost get it. But I still have one question. I found that `display:inline-block` elements are block format context but not inline format context. So I'm confused about if they should also have margin collapsing. – T.T Jan 01 '19 at 16:20
  • @T.T: Yeah, that's a common source of confusion. Does [this](https://stackoverflow.com/questions/35111906/block-level-element-vs-block-formatting-context/35111972#35111972) make things clearer for you? – BoltClock Jan 01 '19 at 16:21
  • Thx. So inline-block elements are inline-level boxes as a result of that their contents don’t participate in their parents’ IFC? – T.T Jan 01 '19 at 16:38