Vertical-align et inline-block

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

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).

On peut aussi la mettre à middle :

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 :

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 !