L'espace entre la div et l'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 13px écart entre le "sc" div " et "séparateur" img.

Les marges externes et internes pour les deux sont mis à 0, null, vide, rien. Argh. Je suis tellement en colère ;d

J'ai été à essayer de comprendre ce qui se passe avec firebug, mais l'espace entre eux n'appartient pas à quoi que ce soit, ce n'est pas une marge, pas une marge, ce que le diable?

Pas de chars, pas de paramètres d'affichage, pas hérité des marges ou des rembourrages soit.

Quel est le problème avec mon code? J'ai essayé de supprimer les espaces dans le HTML mais n'aide pas (by the way, si j'ai mis le séparateur au-dessus de la "sc" div il y a aussi une lacune, mais en plus petit).

Grâce.

[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;
}
  • C'est le retour à la ligne? Vous êtes-vous essayer </div><img?
  • Veuillez afficher les styles CSS et/ou de la page web.
InformationsquelleAutor fomicz | 2010-10-16
  1. 66

    Ajouter display: block; à l' .séparateur d'image.

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

    Le problème est que les images peuvent parfois ajouter un peu de la magie de l'espace vers le haut/au-dessous d'eux, j'ai ce problème à chaque fois que je travaille avec des éléments de l'image que *block* éléments.

    • Super réponse, j'en ai eu un avec display:block avant, mais a ajouté qu'à #sc. Merci beaucoup. Déteste ce genre de MAGIE... Pas de marge, pas de paddings et ajoute 20 pxls? C'est juste de la folie!
    • Avez-vous ce type d'afficher des images à utiliser par défaut si elles ne sont pas les éléments de bloc?
    • ils utilisent display: inline
    • faire tous les éléments inline créer cet espace?
    • Je crois que oui.
    InformationsquelleAutor Marko
  2. 9

    J'ai eu un 3px écart entre une image et la balise div. Aussi de tous les styles ont été mis à 0. Vraiment bizarre.

    Le correctif: 

    img {
   vertical-align: middle;
}

    Cela a fonctionné à merveille pour moi.

    • J'ai eu cette magie de l'espacement a pas été créé par la marge, ni de rembourrage. Cela a résolu pour moi. Merci!
    • a fonctionné pour moi aussi! J'ai eu le même age aussi (entre img et div)..étrange
    InformationsquelleAutor Lex Semenenko
  3. 0

    Avec pas de captures d'écran pour les consulter, je suis de gauche, dans le noir sur ce que vous voulez, c'est le doute.

    Je devine à partir de class="separator" que vous essayez de casser votre contenu avec une ligne horizontale. Ne devriez-vous pas être à l'aide de <hr /> avec style approprié si c'est le cas?

    Dans tous les cas, notez que <p> éléments verticaux les marges par défaut.

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

    Si vous avez vraiment à faire, il y a un tas d'options:

    1. Ensemble margin-bottom: 0; sur le <p>
    2. Ensemble margin-top: -*px; sur .separator où vous êtes en supposant que vous allez toujours avoir un élément juste avant la séparation avec la marge du bas de *px
    3. #sc p:last-child { margin-bottom: 0; } et IE9.js pour laisser les anciennes versions d'Internet Explorer soutenir

    Mais je répète; pas de marge entre le texte et d'un séparateur n'est pas bonne pour moi.

    • Résolu, il fallait utiliser display: block sur la balise img. Effectivement ne pouvez pas utiliser <hr> en raison de la conception. Aussi mon séparateur doit être exactement sous cette div, à cause de son arrière-plan (div commence avec un séparateur et se termine avec elle, de sorte qu'il ressemble à une boîte de fantaisie en haut et en bas des séparateurs comme des frontières).
    InformationsquelleAutor unrelativity
  4. -4

    c'est parce que il y a des espaces entre les balises

    faire:

    </div><img class="separator" src="images/separator.png" />
    • "J'ai essayé de supprimer les espaces dans le HTML mais n'aide pas"
    InformationsquelleAutor Jonathan Fingland