web-dev-qa-db-fra.com

Espace entre div et img?

J'ai un code comme ça:

        <div id="sc">  
            <h1>1. Orange</h1>
            <p>some text in here </p>                                          
        </div>
        <img class="separator" src="images/separator.png" />

Il y a TOUJOURS un écart de 13 pixels entre le "sc" div et le "séparateur" img.

Les marges et les marges des deux sont définies sur 0, nulles, vides, rien. Argh. Je suis tellement en colère; d

J'essayais de comprendre ce qui se passait avec firebug mais l'espace entre eux n'appartient à rien, ce n'est pas une marge, pas un rembourrage, c'est quoi ce bordel?

Pas de flotteurs, pas de paramètres d'affichage, pas de marges ni de rembourrages hérités.

Qu'est ce qui ne va pas avec mon code? J'ai essayé de supprimer les espaces en HTML, mais cela ne m'a pas aidé (d'ailleurs, si je place le séparateur au-dessus de la division "sc", il y a aussi un espace, mais plus petit).

Merci.

[AJOUTÉE]

STYLES CSS:

.separator {
    margin: 0;
    padding: 0;
}

#sc {
    text-align: justify;
    padding: 0;
    margin: 0;
    background-image: url('images/bg.png');  
    background-repeat: repeat-y;
    width: 970px;
}
htmlcssmarginpaddinggaps-in-visuals
27
fomicz

Ajouter un affichage: bloc; à l'image .separator. 

.separator {
    margin: 0;
    padding: 0;
    display: block;
}

Le problème est que les images peuvent parfois ajouter un peu d’espace magique au-dessus/au-dessous d’eux. J'ai ce problème chaque fois que je travaille avec des éléments d’image en tant qu’éléments *block*.

65
Marko

J'avais un écart de 3 pixels entre une image et une balise div. Tous les styles ont également été mis à 0. Vraiment bizarre. 

Le correctif: 

img {
   vertical-align: middle;
}

Cela a fonctionné à merveille pour moi.

9
Lex Semenenko

En l'absence de captures d'écran, je ne vois pas ce que vous voulez dans le noir. C'est donc tout deviner.

Je suppose à partir de class="separator" que vous essayez de diviser votre contenu avec une ligne horizontale. Ne devriez-vous pas utiliser <hr /> avec un style approprié si c'est le cas?

Dans tous les cas, notez que les éléments <p> ont des marges verticales définies par défaut.

Je ne vois pas pourquoi vous voulez que le séparateur soit bien ajusté à votre texte, car visuellement, cela n'a aucun sens pour moi.

Si vous le faites vraiment, il y a un tas d'options:

  1. Définissez margin-bottom: 0; sur le <p>
  2. Définissez margin-top: -*px; sur .separator où vous supposez que vous aurez toujours un élément juste avant le séparateur avec une marge inférieure de *px
  3. #sc p:last-child { margin-bottom: 0; } et IE9.js pour permettre aux anciennes versions d'Internet Explorer de le prendre en charge

Mais je répète; aucune marge entre le texte et un séparateur ne me semble juste.

0
unrelativity