Vertical-align et inline-block

Dans la figure ci-dessous, les blocs de couleur sont en inline-block. Ils sont bizarrement alignés.

gjp
Je suis un second bloc
petit bloc
Je suis en overflow: hidden
texte sans bloc

En fait, par défaut, la baseline des éléments inline est alignée avec celle de leur parent. Or la baseline d'un inline-block est celle de sa dernière ligne de texte… sauf si elle est en overflow différent du défaut (visible), auquel cas c'est le bas de la boîte qui est aligné avec la baseline du parent !

Si on utilise inline-block pour faire de la mise en page, ce comportement par défaut n'est sans doute pas désirable. On peut le corriger avec la propriété vertical-align (en général on la mettra à top).

gjp
Je suis un second bloc
petit bloc
Je suis en overflow: hidden
texte

On peut aussi la mettre à middle :

gjp
Je suis un second bloc
petit bloc
Je suis en overflow: hidden
texte

Attention, vertical-align: middle ne permet pas de centrer verticalement dans un bloc, mais de positionner un bloc par rapport à la baseline de son parent ! Si le parent ne contient qu'une ligne et que sa hauteur n'est pas fixée (comme c'est le cas de l'exemple ci-dessus), alors ça revient au même, mais si on fixe une hauteur, ça ne marche plus :

gjp
Je suis un second bloc
petit bloc
Je suis en overflow: hidden
texte

Autre remarque : vertical-align marche différemment pour les cellules de tableau (ça aligne le contenu de la cellule). À noter aussi, la détermination de la baseline est différente pour les cellules de tableau et les flex items : c'est la baseline de la première ligne de texte !