web-dev-qa-db-fra.com

Supprimer les espaces supplémentaires entourant les iframes?

J'utilise iframes dans ma page et je suis tombé sur un problème étrange. Je mets le css iframe comme si

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

Cependant, il y a toujours des espaces autour de l'iframe. Je l'ai testé avec Chrome et Firefox, et c'est la même chose. J'ai cherché aux alentours et je n'ai rien trouvé. Cet espace n'apparaît pas non plus dans la console Google Chrome ..____. De plus, j'ai déjà le CSS suivant:

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

JSFiddle: ici

htmlcssiframewhitespaceremoving-whitespace
41
Colin Atkinson

Vous venez de voir votre problème avec votre violon parce que vous utilisez display:inline-block. Cela prend en compte les espaces dans votre code HTML. display:inline-block est connu pour être difficile et a un support de navigateur louche.

Option 1: Essayer de supprimer les espaces dans votre code html peut parfois trier le problème.

Option 2: L'utilisation d'une propriété d'affichage différente telle que display:block réglera définitivement le problème. Exemple live: http://jsfiddle.net/mM6AB/3/

63
tw16

Lorsque vous utilisez un élément en ligne, les espaces peuvent provenir de la "ligne" à laquelle appartient l'élément (c'est-à-dire l'espace situé sous la ligne de base). La solution consiste alors à ajouter ceci à son élément parent.

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

iframe est un élément en ligne

8
Sergio Rodrigues

J'ai eu le même problème et je l'ai corrigé en faisant flotter l'élément frame 

iframe {

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

Peut-être que cet espace est en réalité la marge extérieure du document chargé dans le fichier. Essayez de styler le document chargé (style CSS de la page source) avec: 

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

cité de stackoverflow.com Ici

2
Tooma

essayez d'utiliser un div avec overflow: hidden; entourant le <iframe>, comme

<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

Un peu difficile à résoudre sans votre contenu html, mais essayez ceci:

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%;
}

Ajouter le !important forcera le style, car je suppose que vos styles se écrasent.

1
Marc Uberstein

Étant donné qu'aucune des réponses fournies ne m'a apporté de solution (je suis également tombé sur l'étrange problème de marge lors de la mise en œuvre d'un iFrame), j'ai trouvé que cela fonctionnait bien:

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

marginwidth et marginheight ne sont pas valides/officiellement compatibles avec les balises HTML5, mais elles fonctionnent parfaitement dans mes tests ...

0
Leander