28172 sujets

CSS et mise en forme, CSS3

[Résolu] Conteneur d'img, 5px de trop ?

Bonjour à tous, c'est sûrement une question très bête, et j'ai sûrement loupé quelque chose dans mon apprentissage du CSS, mais il y a un truc que je ne comprends pas Smiley smile

Je viens de m’apercevoir que quand je met une image dans un conteneur, le conteneur fera 5px de hauteur de plus que l'image (ces 5px se rajoutent en bas de l'image).
Je peux corriger le tir en donnant au conteneur la hauteur exact de l'image, mais dans le cas sur lequel je travail, ça ne m'arrange pas et puis j'aimerais comprendre ce qui ce passe.

J'ai tester ce bout de code (et plein de variante) sous Firefox et Chromium, même résultat, si je ne donne pas la hauteur de l'image a son conteneur, le conteneur fera 5px en hauteur de plus que l'image Smiley hum :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
    </head> 
    <body>
        <div>
            <img src="image.jpg" alt="" />
        </div>
    </body>
</html>



body {
    background-color: crimson;
    margin: 0;
}
div {
    background-color: darkblue;
}
img {
    height: 250px;
}

-> J'ai mis des couleur pour mieux observer le phénomène Smiley lol

Donc voilà, j'aimerais comprendre pourquoi mon conteneur ne prend pas la hauteur de l'image et me rajoute 5px.

Merci pour votre attention !
Modifié par Adrien1 (09 Jul 2021 - 15:43)
Bon bah super ça répond parfaitement à ma question!

Un petit "vertical-align: middle;" dans mon cas c'est parfait. Je m'attendais à un truc plus complexe Smiley lol

Merci beaucoup ! Smiley jap
Sujet clos
Aller à