Iframe crea espacio adicional debajo
¿Por qué un iframe agrega espacio extra bajo su elemento? Mira este extraño comportamiento:
.border {
background: red;
width: 300px;
height: 200px;
border: 1px solid green;
overflow: visible;
margin: 0;
padding: 0;
}
.border iframe {
border: none;
width: 300px;
height: 100px;
margin: 0;
padding: 0;
opacity: 0.8;
}
.border .lower {
height: 100px;
margin: 0;
padding: 0;
background: blue;
opacity: 0.8;
}
<div class="border">
<iframe src="https://example.com"></iframe>
<div class="lower"></div>
</div>
¿Cómo trabajar alrededor?