余白はiframeで崩壊しませんか？

私は、各行が3つのiframeを含むように、2つの行に6つのiframeを配置しようとしています。私がしたいことは、各iframeで余白を取ることですが、コンテナに接触するiframeの余白はゼロにする必要があります。余白はiframeで崩壊しませんか？

* { 
 
    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>

3つのiframeが32%*3 = 96%を取るように、今、それぞれのiframeは幅32％を持っている：ここでは、コードです。折りたたみによる余白は1%*2 = 2%です。したがって、行の合計幅は96% + 2% = 98%でなければなりません。

私の質問は、残りの2%のスペースはどこですか？マージンは崩壊していませんか？

出典

2016-03-26 user31782

更新OK、どうやら我々は真実の追求でいくつかの誤った認識を持っています。

マージン-崩壊は希望だものではありません、それはこのdemoで発生していないにもそれはOPのデモです。インラインフレームは、インライン要素とinline elements, they only respect horizontal margins通りであるので、これはなぜインラインフレームの上下の空間が、左側には空間又はがあるため、インラインフレームの両側に余裕が存在しない理由
- 理由は、あります右。
- ノートでスクリーンショットを作成しました。要約すると、ピクセルの実際のサイズを誤って評価しています。彼らは非常に小さいです。あなたが期待していたことは、あなたが正確に得ていたものの倍の倍でした。スクリーンショットを参照してください。

マージン崩壊は、WHE発生しますn 1つの要素の垂直マージンは、同じスペースなどと重複/接触/共有する。別の要素の垂直マージンの何が起こるかは、2つのマージンのうち大きい方が支配的であり、わずかなマージンが消えていく間に唯一のマージンになるということです。例：

Div A {margin：50px; } 部門B {margin：20px; }

Div AとDiv Bの間のスペースが50pxになりました。

このarticle

前述のバグが本物であると、まだ問題をお読みください。スクリーンショットをご覧ください。

それは割合を使用するときに明らかにフレキシボックスがフレックス項目のパディングやマージンを尊重しない、バグです。 https://bugzilla.mozilla.org/show_bug.cgi?id=958714

あなたのフレックスコンテナがあなたのビューポートの一部である場合emsを使用してください。
または
フレックスコンテナがあなたのビューポートの大半を占める場合はvwを使用してください。
または
html { font: 500 10px/1 Arial; }を設定し、remを使用してください。

出典

2016-03-26 09:15:37 zer00ne

リンクしたバグを再作成できませんでした。 Flexboxは、パディングとマージンの両方にパーセンテージとピクセル値の両方を使用するように見えます。しかし、私が観察したことは、Flexboxが_margin-collapsingを敬うことではないということです._ [this jsfiddle]（http://codepen.io/user31782/pen/VaWrRV?editors=1100） - 最初の子divの左側の余白2つの連続する子divの間の半分です。 – user31782

マージンの崩壊は、あなたが本当に何かを尊重したいことではない、望ましくない動作です。さて、私は答えで説明します... – zer00ne

余白はiframeで崩壊しませんか？

答えて

関連する問題