Pourquoi ma TextArea apparaît-elle plus haute que la durée voisine ?

Pourquoi ma TextArea est-elle plus haute que son voisin ?

Bien qu'il puisse sembler que l'élément textarea est situé plus haut que son élément span voisin , ce n'est pas réellement le cas.

Alignement de base

Les éléments span et textarea sont des éléments en ligne. Les navigateurs fournissent un espace sous les éléments en ligne pour accueillir les descendants, qui sont des lettres minuscules qui s'étendent sous la ligne de base. Cet espacement garantit que tous les éléments sur la même ligne s'alignent sur leur ligne de base.

Fonctionnalité de TextArea

Les éléments TextArea ne nécessitent généralement pas d'espace pour les descendants car ils consistent en un boîte d'emballage. Cependant, les navigateurs fournissent toujours cet espace pour permettre la possibilité que du texte ou des éléments adjacents partagent la même ligne.

Illusion visuelle

L'illusion de désalignement dans l'exemple fourni est exacerbée par les frontières autour des éléments. La bordure rouge autour de la zone de texte exclut l'espace descendant, tandis que la bordure bleue autour de l'élément span englobe à la fois le texte et l'espace descendant. La suppression de la bordure rouge réduit le désalignement perçu.

Solutions

Pour corriger le désalignement perçu, vous pouvez opter pour l'une des solutions suivantes :

1. Ajoutez vertical-align: bottom à la règle CSS textarea, qui alignera la zone de texte au bas de son conteneur.
2. Ajoutez display: block à la règle CSS textarea, qui la convertira en bloc élément avec toute la hauteur.

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!