Espace entre div Et img?

J'ai un code comme ceci:

        <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 13px entre le div" sc "et l'img" separator".

Les Marges et les rembourrages pour les deux sont définis sur 0, null, empty, nothing. Argh. Je suis tellement fou; 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, qu'est-ce que diable?

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

Qu'est-ce qui ne va pas avec mon code? J'ai essayé de supprimer les espaces en HTML mais n'aide pas (en passant, si je mets le séparateur au-dessus de la div "sc", il y a aussi un espace, mais plus petit).

Merci.

[Ajouté]

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;
}
25
demandé sur Douglas B. Staple 2010-10-16 04:43:13

4 réponses

Ajouter affichage: bloc; à la .séparateur d'image.

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

Le problème est que les images peuvent parfois ajouter un peu d'espace magique en haut/en dessous d'elles, j'ai ce problème chaque fois que je travaille avec des éléments d'image en tant qu'éléments *block*.

62
répondu Marko 2010-10-16 01:02:23

J'avais un écart de 3px entre une image et une balise div. De plus, tous les styles ont été définis sur 0. Vraiment bizarre.

Le correctif: 

img {
   vertical-align: middle;
}

Cela a fonctionné magnifiquement pour moi.

8
répondu Lex Semenenko 2013-09-10 19:50:24

Sans captures d'écran pour se référer à je suis laissé dans l'obscurité sur ce que vous voulez, donc tout cela est deviner.

Je devine à partir de class="separator" que vous essayez de casser 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 cela n'a pas de sens visuellement je.

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

  1. définir 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 la marge inférieure de *px
  3. #sc p:last-child { margin-bottom: 0; } et IE9.js pour laisser les anciennes versions D'Internet Explorer le supporter

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

0
répondu unrelativity 2010-10-16 01:04:59

C'est parce qu'il y a des espaces entre les balises

Faire:

</div><img class="separator" src="images/separator.png" />
-4
répondu Jonathan Fingland 2010-10-16 00:46:44