Pourquoi une image de bloc en ligne comporte-t-elle un espace indésirable en dessous ?

Éliminer l'espace indésirable sous l'image de bloc en ligne

Dans le développement Web, obtenir une image de bloc en ligne positionnée de manière transparente dans un wrapper peut être un défi . Parfois, un espace apparaît sous l’image, laissant une esthétique inesthétique. Ce problème découle du comportement par défaut des éléments de bloc en ligne, qui réservent intrinsèquement de l'espace en dessous d'eux.

Mécanisme sous-jacent

La cause profonde réside dans le modèle de boîte CSS. Un élément de bloc en ligne, tel qu'une image, forme une boîte rectangulaire qui comprend le contenu, le remplissage, la bordure et la marge. Par défaut, lorsqu'un élément de bloc en ligne contient une ligne vide après lui, le navigateur l'interprète comme une nouvelle ligne et crée un espace correspondant dans la mise en page.

Solution : alignement vertical

Pour supprimer l'espace indésirable, il est nécessaire de modifier l'alignement vertical de l'image. En définissant la propriété CSS vertical-align sur top, l'image sera alignée sur le bord supérieur du conteneur de blocs en ligne, éliminant ainsi l'espace.

Code CSS :

<code class="css">img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}</code>

Exemple :

Considérez le code HTML et CSS suivant :

<code class="html"><div id="wrapper">
    <img src="image.jpg">
</div></code>

<code class="css">#wrapper {
    background:green;
}

img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}</code>

Résultat :

En appliquant la propriété vertical-align, l'image s'adaptera désormais parfaitement à l'emballage, sans espace visible en dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!