Pourquoi les éléments de bloc en ligne avec du contenu sont-ils mal alignés verticalement ?

Alignement vertical de l'élément de bloc en ligne avec le contenu

Question :

Pourquoi un élément de bloc en ligne contenant du contenu semblent mal alignés verticalement ?

Explication :

Par défaut, les éléments de bloc en ligne sont alignés verticalement à l'aide de la règle de base. Cela signifie que la ligne de base de l'élément (la ligne sur laquelle reposent la plupart des lettres) est alignée avec la ligne de base de son conteneur parent.

Cependant, lorsque l'un de ces éléments ne contient aucun contenu, comme dans le CSS fourni, par défaut, le navigateur aligne l'élément sur le bord inférieur de la marge. Cet écart peut entraîner un désalignement vertical perçu.

Solution :

Pour garantir un alignement vertical correct, définissez la propriété d'alignement vertical sur le haut. Cela alignera l'élément en haut de son parent plutôt que d'utiliser la règle de base par défaut.

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

Remarque :

Si les deux éléments de bloc en ligne contiennent le même nombre de lignes de texte, l'ajout de texte au deuxième élément peut sembler résoudre le problème d'alignement. Cependant, cela est uniquement dû au fait que cela oblige le deuxième élément à établir une ligne de base. Si le nombre de lignes change, l'alignement deviendra à nouveau incohérent sans appliquer la propriété vertical-align.

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!