L'espace entre les div et img?

Question

J'ai le 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 13px écart entre le div "sc" et img "séparateur".

Les marges et rembourrages pour les deux sont mis à 0, null, vide, rien. Argh. Je suis tellement fou d

J'essaie de comprendre ce qui se passe avec Firebug, mais l'espace entre eux ne vient pas appartenir à quoi que ce soit, ce n'est pas une marge, pas un rembourrage, ce que le diable?

Pas de flotte, pas de paramètres d'affichage, les marges ne héritées ou rembourrages soit.

Que mal de mon code? J'ai essayé de supprimer les espaces blancs en HTML, mais ne pas l'aide (par la voie si je mets le séparateur au-dessus du div « sc » il y a aussi un certain écart, 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;
}

Answer 1

affichage Add: block; à l'image .Séparateur.

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

Le problème est que les images peuvent parfois ajouter un peu d'espace magique vers le haut / en dessous d'eux, j'ai cette question chaque fois que je travaille avec des éléments d'image comme éléments *block*.

Answer 2

J'ai eu un écart de 3 pixels entre une image et balise div. De plus, tous les styles ont été mis à 0. vraiment bizarre.

Le correctif:

img {
   vertical-align: middle;
}

a fonctionné à merveille pour moi.

Answer 3

Sans captures d'écran pour désigner je suis parti dans l'obscurité sur ce que vous voulez, si cela est deviner.

Je devine de class="separator" que vous essayez de briser votre contenu avec une ligne horizontale. Ne devriez-vous utiliser <hr /> avec un style approprié si tel est le cas?

Dans tous les cas, la note que des éléments de <p> ont des marges verticales fixées par défaut.

Je ne vois pas pourquoi vous voulez que le séparateur jusqu'à serré contre votre texte, car il ne fait pas de sens pour moi visuellement.

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

1. Set margin-bottom: 0; sur le <p>
2. Set margin-top: -*px; sur .separator où vous êtes en supposant que vous allez toujours avoir un droit d'élément avant le séparateur avec une marge inférieure de *px
3. #sc p:last-child { margin-bottom: 0; } et href="http://code.google.com/p/ie7-js/" rel="nofollow"> IE9.js pour laisser les anciennes versions d'Internet Explorer le soutenir

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

Answer 4

qui est parce qu'il ya des espaces entre les balises

faire:

</div><img class="separator" src="images/separator.png" />