Pourquoi les éléments de blocs en ligne sont-ils mal alignés verticalement et comment puis-je y remédier ?

Différence d'alignement vertical d'un élément de bloc en ligne

Pourquoi un élément de bloc en ligne avec du contenu présente-t-il un désalignement vertical ?

Explication :

La propriété CSS vertical-align par défaut, aligne la ligne de base de l'élément avec la ligne de base de l'élément parent. Si l'élément n'a pas de zones de ligne d'entrée ou si sa propriété de débordement n'est pas visible, la ligne de base s'aligne sur le bord de la marge inférieure.

Dans l'exemple fourni, l'élément .divAccountData manque initialement de contenu. Par conséquent, sa ligne de base s'aligne sur le bord de la marge inférieure de son parent, provoquant un désalignement avec l'élément .divAccountPicker.

Solution :

Pour aligner verticalement les deux éléments, définissez la propriété vertical-align de l'élément .divAccountData sur top :

.divAccountData {
  vertical-align: top;
  /* Other CSS properties... */
}

Cela garantit que la ligne de base de l'élément .divAccountData s'aligne sur le bord supérieur de l'élément .divAccountPicker.

Considérations supplémentaires :

• Le problème peut également être résolu en ajoutant du texte à l'élément .divAccountData, qui établit une zone de ligne de flux entrant et réinitialise la ligne de base.
• La ligne de base l'alignement est affecté par le nombre de lignes dans chaque élément. Si le nombre de lignes varie, forcer l'alignement vertical à l'aide de vertical-align: top sur les deux éléments est nécessaire.

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!