更新

Question

我正在尝试在两行中排列6个iframe，以便每行包含三个iframe。我想要做的是，每个iframe都有边距但是触及它的iframe的边距应该为零。这是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

现在每个iframe的宽度为32％，因此三个iframe占用32%*3 = 96%。由于崩溃导致的边距为1%*2 = 2%。因此，行的总宽度必须为96% + 2% = 98%。

我的问题是剩下的2%空间在哪里？保证金不会崩溃吗？

Answer 1

更新

好吧，显然我们在追求真相方面有一些误导的看法。

保证金崩溃不是我们想要的东西，它不会出现在demo中，也不会出现在OP的演示中。
- iframe两边都没有边距的原因是因为iframe是内嵌元素而且是inline elements, they only respect horizontal margins，所以这就是为什么iframe上方和下方都有空格但没有空格的原因左边或右边。
- 我用笔记制作了截图。总而言之，您错误判断了像素的实际大小。它们非常小。你所期待的是你准确得到的两倍。请参见屏幕截图。

当一个元素的垂直边距重叠/接触/共享相同的空间等时，会发生边缘折叠。另一个元素的垂直边距。会发生的是，两个边缘中的较大者占主导地位并且成为唯一的边际，而较小的边缘消失。例如：

Div A {保证金：50px; } Div B {保证金：20px; }

Div A和Div B之间的空间现在是50px。

请阅读此article
前面提到的错误是真实的，仍然是一个问题。请看截图。

这是一个错误，显然当使用百分比时，flexbox不会支持flex-items的填充或边距。 https://bugzilla.mozilla.org/show_bug.cgi?id=958714

如果您的Flex容器是视口的一部分，请使用ems。
或
如果您的Flex容器延伸到视口的大部分区域，请使用vw。
或
设置html { font: 500 10px/1 Arial; }并使用rem。

在iframe中保证金不会崩溃吗？

1 个答案:

更新