Положение абсолютного фрейма неправильной ширины и высоты

Question

У меня есть iframe со следующим кодом в HTML:

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

Я назначил это правило CSS для iframe, и нет никаких других правил, влияющих на iframe, кроме сброса CSS через normalize.

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