位置绝对 iframe 不正确的宽度和高度

Question

我在 HTML 中有一个带有以下代码的 iframe：

<iframe id="element" src="url"></iframe>

我将这个 CSS 规则分配给了 iframe，除了通过 normalize.

重置 CSS 之外，没有其他规则影响 iframe

#element {
  bottom: 32px;
  left: 32px;
  position: absolute;
  right: 32px;
  top: 80px;
}

理想情况下，此代码应生成此布局：

然而，实际布局最终是这样的：

Answer 1

除了定位 iframe absolute，您还可以将它放在一个容器中，让容器处理它 padding。请参阅以下代码段：

.container {
  background: red;
  padding: 60px 20px 20px 20px;
  display: inline-block;
}

#layerverse {
  background: blue;
}

<div class="container">
<iframe id="layerverse" src="https://null.perchance.org/layerverse"></iframe>
</div>

Position absolute iframe incorrect width and height