个人中心
gpt4 book ai didi

html - margin 不会在 iframe 中崩溃吗？

转载 作者：太空宇宙 更新时间：2023-11-04 02:32:48 25 4
gpt4 key购买 nike

我正在尝试将 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>

现在每个 iframe 的宽度为 32%，所以三个 iframe 占用 32%*3 = 96%。由于折叠而产生的边距是 1%*2 = 2%。所以一行的总宽度必须是 96% + 2% = 98%。

我的问题是剩余的 2% 空间在哪里？利润率没有崩溃吗？

最佳答案

更新

好吧，显然我们在追求真相的过程中存在一些误入歧途的看法。

  1. margin-collapsing 不是我们想要的，它不会发生在这个 demo 中。它也不在 OP 的演示中。

    • iframe 两侧没有边距的原因是因为 iframe 是内联元素，并且 inline elements, they only respect horizontal margins ，所以这就是为什么 iframe 上下都有空间，而左右没有空间的原因。

    • 我制作了带有注释的屏幕截图。总而言之，您一直在误判像素的实际大小。它们很小。您所期望的是您准确获得的两倍。查看屏幕截图。

enter image description here

enter image description here

enter image description here

enter image description here

  1. 当一个元素的垂直边距重叠/接触/共享同一空间等时，会发生边距折叠。另一个元素的垂直边距。发生的情况是，两个边距中较大的一个占主导地位并成为唯一的边距，而较小的边距消失了。示例:

    Div A { 边距:50px; }Div B { 边距:20px;

    Div A 和 Div B 之间的间距现在为 50px。

    请阅读此article

  2. 前面提到的错误是真实存在的，并且仍然是一个问题。请查看屏幕截图。

enter image description here

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

  • 如果您的 flex 容器是视口(viewport)的一部分，请使用 ems。
    或
  • 如果您的 flex 容器覆盖了大部分视口(viewport)，请使用 vw。
    或
  • 设置 html { font: 500 10px/1 Arial; } 并使用 rem。

关于html - margin 不会在 iframe 中崩溃吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36232505/

25 4 0
文章推荐： c - 二进制表达式 ('double' 和 'double' 的无效操作数)
文章推荐： javascript - 读取包含 Node.JS 中对象的 JS 文件
文章推荐： C:while循环退出条件，使用fgets进行输入
文章推荐： javascript - Jenkins 中的单元测试 Express 应用程序
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com