CSS : img vertical-align dans un paragraphe

[clarusad]

Salut,
Comment éviter ceci :
 Capture_d_____cran_2019_04_24____14.39.54.jpg ( 15.61 Ko ) Nombre de téléchargements : 8

Code

img { vertical-align:middle }

Pourquoi entre la première ligne et la seconde il y a tant d'espace ?
Merci

[scoch]

Tu passes l'image en flottant à gauche. Tu lui attribues une hauteur de deux hauteurs de ligne. Et une marge à droite.

Code

body {
    font-size: 16px;
    line-height: 1.5;
}
img {
    float: left;
    height: 3em;
    width: auto;
    margin-right: .5em;
}

<img src="image.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Ou alors si tu préfères contraindre la largeur, tu passes l'image et le paragraphe en inline-block.

Code

.image,
.texte {
    display: inline-block;
    vertical-align: middle;
}
.image {
    width: 3em;
    height: auto;
    margin-right: .5em;
}
.texte {
    /* 3.5em = width + margin-right de l'image */
    width: calc(100% - 3.5em);
}

<img class="image" src="image.jpg"
><p class="texte">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

Et si l'image et le paragraphe sont dans une boîte, tu peux utiliser le module flexbox.

Code

body {
    font-size: 16px;
    line-height: 1.5;
}
.conteneur {
    display: flex;
    align-items: center;
}
.conteneur img {
    display: block;
    height: 3em;
    width: auto;
    margin-right: .5em;
}

<div class="conteneur">
    <img src="image.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Ce message a été modifié par scoch - 24 Apr 2019, 21:39.