Does margin not collapse in iframes?

Question

I am trying to arrange 6 iframes in two rows such that each row contains three iframes. What I want to do is, have margin with each iframe but the margin with the iframes that touch it's container should be zero. Here is the code:

* {
  box-sizing: border-box; 
 }
.bodycontainer3 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 0;
  padding-bottom: 0;
  border: 2px dotted red;
}

.bodycontainer3 iframe {
  width: 32%;
  margin: 1%;
}
.bodycontainer3 iframe:nth-of-type(1),
.bodycontainer3 iframe:nth-of-type(4) {
  margin-left: 0;
}
.bodycontainer3 iframe:nth-of-type(3),
.bodycontainer3 iframe:nth-of-type(6) {
  margin-right: 0;
}

<body>

<div class="bodycontainer3">

  <iframe src="https://www.youtube.com/embed/Q5911Zy7Jos?autoplay=0" autoplay="0" allowfullscreen="allowfullscreen"></iframe>
  <iframe src="https://www.youtube.com/embed/r2rmtwOFLx0?autoplay=0" autoplay="0" allowfullscreen="allowfullscreen"></iframe>
  <iframe src="https://www.youtube.com/embed/AA_TxwrizzQ?autoplay=0" autoplay="0" allowfullscreen="allowfullscreen"></iframe>



  <iframe src="https://www.youtube.com/embed/OaRCWjp4WFo?autoplay=0" autoplay="0" allowfullscreen="allowfullscreen"></iframe>
  <iframe src="https://www.youtube.com/embed/lwbs1BQr0qI?autoplay=0" autoplay="0" allowfullscreen="allowfullscreen"></iframe>
  <iframe src="https://www.youtube.com/embed/q3gOHGbppIc?autoplay=0" autoplay="0" allowfullscreen="allowfullscreen"></iframe>

</div>
</body>

Now each iframe has width 32% so three iframes take 32%*3 = 96%. The margin due to collapsing is 1%*2 = 2%. So the total width of a row must be 96% + 2% = 98%.

My question is where is the remaining 2% space? Are margins not collapsing?

score 2 · Answer 1 · edited May 23 '17 at 11:45

Update

Ok, apparently we have some misguided perceptions in our pursuit of the Truth.

Margin-collapsing is not something that's desired and it isn't occurring in this demo nor is it in the OP's demo.
- The reason why there is no margin present on either side of the iframes, is because iframes are inline elements and as inline elements, they only respect horizontal margins, so this why there is space above and below the iframes but no space on the left or right.
- I made screenshots with notes. To summarize, you have been misjudging the actual size of a pixel. They are very small. What you were expecting was twice as much as to what you were getting accurately. See the screenshots.

Margin-collapsing occurs when a vertical margin of one element overlaps/touches/ share the same space,etc. of another element's vertical margin. What happens is that the larger of the two margin dominates and becomes the only margin while the smaller margin disappears. Example:

Div A { margin: 50px; } Div B { margin: 20px; }

The space between Div A and Div B is now 50px.

Please read this article
The bug mentioned earlier is real and still an issue. Please see screenshot.

It's a bug, apparently flexbox does not honor padding or margins of flex-items when using percentages. https://bugzilla.mozilla.org/show_bug.cgi?id=958714

Use ems if your flex container is a portion of your viewport.
or
Use vw if your flex container stretches over the majority of your viewport.
or
Set html { font: 500 10px/1 Arial; } and use rem.

I couldn't recreate the bug you've linked. Flexbox seem to honor both padding and margin with both percent and pixel values. But what I observed is that Flexbox doesn't honor _margin-collapsing._ See [this jsfiddle](http://codepen.io/user31782/pen/VaWrRV?editors=1100) -- margin to the left of first child div is half of between two consecutive child divs. — user31782, Mar 27 '16 at 07:37
Margin collapsing is not something you'd really want anything to honor, it's a undesirable behavior. Ok, I'll explain it in my answer... — zer00ne, Mar 27 '16 at 09:21

Does margin not collapse in iframes?

1 Answers1

Update