Discussion :

[defacta]

Bonjour,

J'ai essayé mais sans succés d'enlever un espace qu'il y a en bas d'un Modal Bootstrap :

Code :

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
 
<div class="modal fade" id="ModalDetails" role="dialog" >
    <div class="modal-dialog modal-lg">
 
        <!-- Modal content-->
        <div class="modal-content" style="background-color:red;margin:0px;padding:0px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><i class="fa fa-user-plus fa-3x pad-r-10"></i>Informations détaillées d un compte</h4>
            </div>
            <div class="modal-body pad-0">
                <iframe id="If_accountdetails" name="If_accountdetails" width="100%" height="400" style="overflow-x:hidden !important;border: 0px;" class="noborder" src="about:blank"></iframe>
            </div>
        </div>
 
    </div>

En exécutant ce code, on voit bien une bande rouge en bas malgrès un margin et un padding à 0px :


Quelqu'un saurait comment enlever cette bande rouge ?

Merci,
Vincent.

[defacta]

C'est bon j'ai trouvé en mettant display:block dans le style de l'iframe.

Le problème c'est que je ne comprends pas pourquoi il m'a fallu mettre block !

[NoSmoking]

Bonjour,
par défaut un élément <iframe> est représenté en display:inline, ce qui entraine un placement sur la ligne de base, il en résulte un espace en dessous réservé aux jambes des lettres.

C'est le même problème qu'avec les <img> lorsque l'on rencontre un espace en dessous indésirable.

[defacta]

Dacc, merci

Je pensais que tous les éléments HTML avaient par défaut display:block...

[NoSmoking]

Utilise l'inspecteur d'élément pour te convaincre du contraire, les valeurs que peut prendre display ne sont quand même pas anodines.

Nota : <iframe>, si je ne m'abuse, signifie inline-frame.