定位绝对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

您可以将其放置在容器中，然后让容器处理其absolute，而不是放置iframe 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>