Marj, iframe'lerde daralmaz mı?

Her satırda üç iframe içerecek şekilde iki satırda 6 iframe ayarlamaya çalışıyorum. Yapmak istediğim, her iframe ile marjı var, ancak konteynere dokunan iframe'lerle marjı sıfır olmalıdır. Marj, iframe'lerde daralmaz mı?

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

Şimdi her iframe width% 32'sini alır, böylece üç Iframe'ler 32%*3 = 96% atın: İşte kodudur. Çökme nedeniyle marj 1%*2 = 2%'dur. Yani bir satırın toplam genişliği 96% + 2% = 98% olmalıdır.

Sorum şu anda 2% alan nedir? Marjlar daralmıyor mu?

kaynak

2016-03-26 user31782

Tamam Güncelleme, görünüşe göre Hakikat arayışımızda bazı yanlış algıları var.

Marjı-çökmesi istenen bir şey değildir ve bu demo meydana gelmiyor ne de OP'ın demo öyle. Iframe'ler satır içi unsurlardır ve inline elements, they only respect horizontal margins, bu nedenle bu kadar neden yukarıda ve iframe'lerin aşağıda yer ama hiçbir boşluk sola veya üzerinde olduğundan
- iframe'lerden her iki tarafında hiçbir marj mevcut olmayışının sebebi
  olduğu sağ.
- Ekran görüntüleri notlarla oluşturdum. Özetlemek gerekirse, bir pikselin gerçek boyutunu yanlış değerlendirdiniz. Onlar çok küçükler. Ne beklediğin, doğru bir şekilde aldığın şeyin iki katıydı. Ekran görüntülerine bakın.

Kenar-çökmesi whe oluşur n bir öğenin dikey kenar boşluğu aynı alana bindirilir/dokunur/paylaşır, vb. başka bir öğenin dikey kenar boşluğu. Olan şey, iki marjın daha büyük olması ve daha az marjın ortadan kalkmasıyla tek marjın hakim olması. Örnek:

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

Div A ve Div B arasındaki alan artık 50 pikseldir.

bu article
Daha önce de belirttiğimiz hata gerçek ve hala bir sorun okuyunuz. Lütfen ekran görüntüsüne bakın.

Bu yüzdeler kullanırken görünüşte FlexBox esnek-kalemlerin dolgu veya marjları dikkate almaz, bir sinek. https://bugzilla.mozilla.org/show_bug.cgi?id=958714

kullanın ems sizin esnek konteyner viewport'da bir kısmı ise.
veya
Esnek kapsayıcınız, görüş alanınızın büyük çoğunluğunun üzerine uzanıyorsa, vw kullanın.
veya
html { font: 500 10px/1 Arial; } ve rem'u kullanın.

kaynak

2016-03-26 09:15:37 zer00ne

Bağladığınız hatayı yeniden oluşturamadım. Flexbox, hem yüzde hem de piksel değerleriyle hem dolgu hem de kenar boşluğunu onurlandırıyor gibi görünüyor. Ama gözlemlediğim şey, Flexbox'ın _margin-collapsing'i onayladığını görmüyor. [Bu jsfiddle] 'a bakın. (Http://codepen.io/user31782/pen/VaWrRV?editors=1100) - ilk çocuk div'in solundaki kenar boşluğu iki ardışık çocuk div arasındaki yarısıdır. – user31782

Marj daraltmak, onurlandırmak istediğiniz bir şey değil, istenmeyen bir davranış. Tamam, cevabımda açıklayacağım ... – zer00ne

cevap

İlgili konular