Iframe erstellt zusätzlichen Speicherplatz unter

Question

Warum fügt ein iFrame zusätzlichen Platz unter seinem Element hinzu? Schauen Sie sich dieses seltsame Verhalten:

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

Wie umgehen?

Answer 1

display:block; auf Ihren iFrame Stil hinzufügen wie folgt:

.border iframe { 
    border: none; 
    width: 300px; 
    height: 100px; 
    margin: 0; 
    padding: 0; 
    opacity: 0.8; 
    display:block; /* Add this */ 
} 

iFrame ist ein Inline-Rahmen, was bedeutet, dass es ein Inline-Element ist, das wie der img-Tag, Probleme mit Leerzeichen hat. Durch Setzen von display:block; wird der iFrame zu einem Blockelement (wie einem Div), wodurch das Leerzeichen entfernt wird.

Answer 2

iframe ist ein Inline-Element. Dies berücksichtigt Leerzeichen in Ihrem HTML. display:inline-block ist dafür berüchtigt, schwierig zu sein.

Fügen Sie display:block; dem CSS für Ihren iframe hinzu.

Answer 3

hier ist eine andere Antwort überprüfen es bitte ...

.border iframe { 
border: none; 
width: 300px; 
height: 100%; 
margin: 0; 
padding: 0; 
opacity: 0.8; 
} 

Answer 4

Das iframe Element ein Inline-Element ist. Eine Möglichkeit, das Problem mit dem Abstand zu beheben, ist das Hinzufügen von display: block. Sie können das Problem jedoch auch beheben, indem Sie einfach vertical-align: bottom; zum Element iframe hinzufügen.

Answer 5

Was für meine App funktionierte, war das Hinzufügen von overflow-y: hidden; zum HTML des iframe.

Answer 6

Der einfachste Weg, dies zu tun, ist einfach "style =" display: block "" in den Iframe-Parametern hinzuzufügen.

zum Beispiel

<iframe width="100%" height="100%" frameborder="0" style="display:block" 
    src="https://www.url.com"></iframe>