Pourquoi mes éléments de bloc en ligne sont-ils mal alignés verticalement ?

Dévoilement du mystère du désalignement vertical dans les éléments de bloc en ligne

Rencontre avec un problème CSS déroutant où le contenu d'un élément de bloc en ligne apparaît mal aligné verticalement ? Le coupable peut être la valeur d'alignement vertical par défaut.

Les éléments de bloc en ligne ont un alignement vertical par défaut de la ligne de base, qui aligne la ligne de base de la boîte avec celle de son élément parent. Cela peut entraîner un alignement inattendu lorsque l'élément ne contient aucune zone de ligne d'entrée ou a une valeur de débordement autre que visible.

Considérez le code HTML et CSS suivant :

<div>

#divBottomHeader {
  height: 43px;
}
.divAccountPicker {
  width: 200px;
  height: 40px;
}
.divAccountData {
  width: 400px;
  height: 40px;
}

Dans cet exemple, l'élément « .divAccountData » apparaît décalé vers le bas par rapport à « .divAccountPicker ». L'ajout de texte à ".divPutTextToFixIssue" aligne comme par magie les éléments verticalement.

Ce comportement découle du fait que la ligne de base d'un élément de bloc en ligne est déterminée par la ligne de base de sa dernière boîte de ligne. En ajoutant du texte à ".divPutTextToFixIssue", nous avons effectivement modifié la ligne de base et forcé l'alignement à être en haut.

Cependant, si les deux blocs contiennent un nombre de lignes différent, l'alignement sera à nouveau rompu. Pour garantir un alignement vertical cohérent, forcez l'alignement à l'aide de la propriété vertical-align :

.divAccountData {
  vertical-align: top;
}

Cela alignera la ligne de base de ".divAccountData" avec le haut de ".divAccountPicker", quel que soit le nombre de lignes.

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!