HTML5 <figure> margin/padding

Il semble que l'élément HTML5 figure ajoute une certaine marge/padding si il y a une image à l'intérieur. Si vous ajouter une bordure autour de la figure, vous pouvez voir un petit rembourrage à l'intérieur de l'élément.

<figure>
    <img src="image" alt="" />
</figure>

Je réinitialiser toutes les marges externes et internes avec les CSS par écrit * { margin: 0; padding: 0 }

Ce que quelqu'un sait comment le gérer? Veuillez jeter un oeil à ce violon: http://jsfiddle.net/74Q98/

Ce n'est pas localisée à figure: jsfiddle.net/74Q98/2

OriginalL'auteur Jan | 2012-08-29

  1. 13

    Ce n'est pas un <figure> bug c'est un comportement normal de la <img> élément

    Pour le fixer essayer ce - DÉMO

    img {
    border: 1px solid green;
    display: block;
    vertical-align: top;
}

    Mise à JOUR

    Par défaut, toutes les images de rendu en ligne (texte), de sorte que le peu d'espace supplémentaire en dessous, c'est l'espace de toutes les lignes de texte (ex. pour q, p etc.)

    La réponse ci-dessus combine 2 méthodes de fixation de la question. Donc, fondamentalement, vous pouvez utiliser un seul de ces:

    img { display: block; }

    ou

    img { vertical-align: top; }
    Je suis curieux, depuis vertical-align: bottom; ou middle produire le même résultat (et la display: block; ne semble pas être nécessaire): quelle est la raison de ce comportement? Pourquoi ne vertical-align: baseline; produire de l'espace supplémentaire?
    Aha je vois, il s'aligne parfaitement avec le texte réel de lettres: jsfiddle.net/74Q98/3
    Je vous remercie beaucoup. Le display: block méthode fonctionne très bien.
    total de l'avis: tout le travail ci-dessus, mais je préfère vertical-align: bottom; - il semble juste de mieux décrire ce que je veux accomplir... je n'aime pas afficher le bloc, parce que je suis totalement changer la façon dont l'image se comporte dans le flux...

    OriginalL'auteur Zoltan Toth