wake-up-neo.com

Entfernen Sie die zusätzlichen Whitespace Iframes?

Ich verwende iframes auf meiner Seite und bin auf ein seltsames Problem gestoßen. Ich habe das iframe-css so eingestellt

iframe {
    margin: none;
    padding: none;
    background: blue; /* this is just to make the frames easier to see */
    border: none;
}

Es gibt jedoch immer noch Leerzeichen rund um den iframe. Ich habe es in Chrome und Firefox getestet, und es ist dasselbe. Ich suchte herum und konnte nichts finden. Dieses Leerzeichen wird auch nicht in der Chrome-Konsole angezeigt .. .. Außerdem habe ich bereits folgendes CSS:

html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
}

JSFiddle: hier

41
Colin Atkinson

Sie haben gerade Ihre Geige gesehen, weil Sie display:inline-block verwenden. Dies berücksichtigt Leerzeichen in Ihrer HTML-Datei. display:inline-block ist bekannt dafür, schwierig zu sein und hat eine unübersichtliche Browserunterstützung.

Option 1: Wenn Sie versuchen, den Leerraum in Ihrer HTML-Datei zu entfernen, kann dies manchmal das Problem lösen.

Option 2: Wenn Sie eine andere Anzeigeeigenschaft wie display:block verwenden, wird das Problem definitiv gelöst. Live-Beispiel: http://jsfiddle.net/mM6AB/3/

63
tw16

Wenn Sie ein Inline-Element verwenden, kann der Leerraum aus der "Linie" stammen, zu der das Element gehört (dh der Raum unter der Grundlinie). Die Lösung besteht dann darin, dieses zu seinem übergeordneten Element hinzuzufügen.

line-height: 0;
15
Jeff Clemens
iframe { display:block; }

iframe ist ein Inline-Element

8

Ich hatte das gleiche Problem und habe es behoben, indem ich das Rahmenelement verschoben habe 

iframe {

    margin: none;
    padding: none;
    border: none;
    line-height: 0;
    float: left; 
}
2
user6046313

Vielleicht ist dieser Leerraum tatsächlich der äußere Rand des Dokuments, das in das Dokument geladen wird. Versuchen Sie, das geladene Dokument (CSS-Formatierung der Quellseite) mit: 

html, body {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

zitiert von stackoverflow.com Hier

2
Tooma

versuchen Sie es mit einem div mit overflow: hidden;, der den <iframe> umgibt, wie

<div style="height: 29px; overflow: hidden;">
   <iframe frameborder=0 allowtransparency=yes scrolling=no src="../hng_frames/copyright_part.html" width="980" height="30">
      <p>Your browser does not support iframes.</p>
   </iframe>
</div>
1
dipankar

Etwas schwer zu lösen ohne HTML-Inhalte, aber probieren Sie es aus:

iframe {
    margin: 0px !important;
    padding: 0px !important;
    background: blue; /* this is just to make the frames easier to see */
    border: 0px !important;
}

html, body {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    width: 100%;
    height: 100%;
}

Das Hinzufügen von !important wird den Style erzwingen, da ich davon ausgehe, dass sich Ihre Styles überschreiben.

1
Marc Uberstein

Da keine der angegebenen Antworten eine Lösung für mich lieferte (beim Implementieren eines iFrame bin ich auch über das seltsame Margenproblem gestolpert), fand ich Folgendes gut:

<iframe frameborder="0" marginwidth="0" marginheight="0" src="/something"></iframe>

marginwidth und marginheight sind nicht gültig/offiziell unterstützte HTML5-Tags, aber sie funktionieren gut in meinen Tests ...

0
Leander