Espace sous un iframe

**eleydet** · 29/12/2020, 18h22

Bonjour,

Les deux fichiers ci-dessous sont placés dans un même dossier.
Fichier page.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body { 
        background-color: #ff9; 
        padding: 20px; 
      }
    </style>
  </head>
  <body>Un texte...</body>
</html>

Fichier index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body { text-align: center; }
      div { display: inline-block; }
      iframe { border: none; }
      nav {
        background-color: #9ee;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div>
      <iframe src="page.html"></iframe>
      <nav><button type="button">Cliquer</button></nav>
    </div>
  </body>
</html>

Le navigateur lit le fichier index.html en affichant un rectangle jaune au dessus d'un rectangle bleu, mais séparés par un petit espace. Pourquoi y a-t-il ce petit espace entre les deux rectangles? Quelle est la bonne manière de le supprimer, de sorte que les rectangles restent collés l'un à l'autre?

**NoSmoking** · 30/12/2020, 08h07

Bonjour,
le mode de rendu par défaut des <iframe> est inline, ce qui génère un espace en dessous qui traditionnellement permet d'afficher les jambages des lettres, même si dans ce cas ce n'est pas judicieux.
Il existe moult façons de faire en jouant sur le mode de rendu ou tout simplement en mettant un vertical-align: bottom sur l'<iframe>.

Espace sous un iframe

CSS

Vue hybride

Discussions similaires

Partager

Partager