Comme on vient de le voir, mettre un élément en inline-block nous permet de modifier ses proportions tout en conservant les propriétés d'une balise de type inline.
Le positionnement par éléments flottants est très intéressant et reste souvent la meilleure solution qui s'offre à vous pour gérer l'alignement des blocs de vos pages web. Cependant il existe également un autre moyen pour arriver à un résultat similaire, et ce moyen se révèle plus efficace dans bien des situations.
Pour ce faire il suffit d'appliquer le type inline-block à vos éléments en passant par la propriété display comme nous l'avons vu précédemment.
Voici un exemple de code alternatif à ce que nous avons vu en début de chapitre :
nav { width: 140px; display: inline-block; }
section { display: inline-block; }
Bon. Comme vous le remarquerez, les deux éléments se sont positionnés sur la même ligne de base : celle du bas.
Nous on voudrait idéalement avoir ces deux éléments positionnés selon la ligne du haut.
Rassurez-vous c'est très facile à faire avec CSS, il existe justement une propriété pour cela : la propriété vertical-align.
La propriété en question permet de modifier l'alignement vertical des éléments.
Voici quelques valeurs qu'elle peut prendre :
baseline : base de l'élément alignée avec celle de l'élément parent (par défaut)
top : base de l'élément alignée en haut
middle : base de l'élément alignée au centre vertical
bottom : base de l'élément alignée en bas
En l'occurrence nous on veut utiliser la valeur "top" pour que nos éléments soient alignés verticalement par le haut.