Inline-block et vertical-align

La valeur inline-block permet de placer plusieurs éléments sur une même ligne tout en leur conservant un comportement de bloc. Ensuite, la propriété vertical-align aide à mieux régler leur alignement vertical quand leur hauteur n'est pas la même.

Mixer les propriétés block et inline avec inline-block

En CSS, un élément block occupe naturellement toute la largeur disponible. À l'inverse, un élément inline reste dans le flux du texte et se place à côté des éléments voisins.

La valeur inline-block mélange justement ces deux idées. L'élément continue à se placer sur une ligne, mais il garde aussi plusieurs caractéristiques d'un bloc.

						
							<div class="carte">Bloc 1</div>
							<div class="carte">Bloc 2</div>
							<div class="carte">Bloc 3</div>
						
					

						
							.carte{
								display: inline-block;
								width: 120px;
								padding: 15px;
								background: #d9eef2;
							}
						
					

Ici, les trois blocs restent côte à côte parce qu'ils sont en inline-block. Pourtant, nous pouvons leur donner une largeur, un padding, une hauteur ou des marges, ce qui serait beaucoup plus limité avec un simple élément inline.

Attention ! Comme ces éléments restent dans un flux inline, les espaces ou retours à la ligne présents dans le HTML peuvent créer un petit écart visuel entre eux.

Intérêt des éléments en inline-block

Pendant longtemps, inline-block a été une solution pratique pour mettre plusieurs blocs sur une même ligne sans utiliser float.

Cette valeur est particulièrement utile quand vous voulez :

• placer plusieurs petits blocs les uns à côté des autres,
• conserver des dimensions précises avec width ou height,
• garder un code simple pour des boutons, des cartes ou des vignettes.

Les propriétés numériques utilisées avec des éléments en inline-block acceptent les unités CSS habituelles. Selon le besoin, vous pouvez donc utiliser px, %, em, rem, vw ou vh.

						
							<a href="#" class="bouton">Accueil</a>
							<a href="#" class="bouton">Cours</a>
							<a href="#" class="bouton">Contact</a>
						
					

						
							.bouton{
								display: inline-block;
								padding: 12px 18px;
								margin-right: 8px;
								background: #007890;
								color: white;
							}
						
					

Ce type de mise en page reste simple à comprendre. Chaque lien se comporte comme un petit bloc, mais tous restent sur la même ligne.

Aujourd'hui, pour des mises en page plus riches, on préfère souvent Flexbox ou Grid. Malgré cela, inline-block reste utile dans des cas simples et il permet surtout de bien comprendre le fonctionnement du flux CSS.

Aligner verticalement les éléments avec vertical-align

Quand plusieurs éléments sont en inline-block, ils ne s'alignent pas automatiquement comme on l'imagine toujours. Par défaut, le navigateur les aligne souvent sur la ligne de base du texte.

Si un bloc est plus haut qu'un autre, le résultat peut donc paraître un peu étrange. C'est là que la propriété vertical-align devient intéressante.

						
							<div class="petit">Petit</div>
							<div class="grand">Grand bloc</div>
						
					

						
							.petit,
							.grand{
								display: inline-block;
								width: 120px;
							}

							.petit{
								height: 60px;
							}

							.grand{
								height: 110px;
							}
						
					

Ici, les deux blocs sont sur la même ligne, mais leur alignement vertical n'est pas forcément celui que vous attendiez. vertical-align sert justement à corriger ce point.

Les valeurs définies avec un mot-clé

La façon la plus simple d'utiliser vertical-align consiste à employer un mot-clé. Les valeurs les plus connues sont :

• top,
• middle,
• bottom,
• baseline.

Chaque valeur indique au navigateur sur quel repère vertical il doit aligner l'élément.

						
							<div class="bloc top">Top</div>
							<div class="bloc milieu">Middle</div>
							<div class="bloc bas">Bottom</div>
						
					

						
							.bloc{
								display: inline-block;
								width: 110px;
								height: 90px;
							}

							.top{
								vertical-align: top;
							}

							.milieu{
								vertical-align: middle;
							}

							.bas{
								vertical-align: bottom;
							}
						
					

Avec top, les blocs se calent en haut. Avec middle, ils se recentrent par rapport à la ligne. Avec bottom, ils s'alignent en bas. La valeur baseline, elle, s'appuie sur la ligne de base du texte, ce qui explique certains décalages observés par défaut.

Attention ! vertical-align n'agit pas comme une propriété magique de centrage universel. Elle fonctionne surtout sur les éléments inline, inline-block ou table-cell.

Les valeurs définies avec des valeurs numéraires

Il est aussi possible d'utiliser une valeur numérique avec vertical-align. Dans ce cas, vous décalez l'élément vers le haut ou vers le bas par rapport à sa position normale.

Les unités les plus courantes sont px, em, rem ou encore %.

						
							<span class="icone">★</span>
							<span class="texte">Nouveau cours</span>
						
					

						
							.icone{
								display: inline-block;
								vertical-align: -4px;
							}
						
					

Dans cet exemple, l'étoile descend légèrement grâce à la valeur -4px. Ce type de réglage peut être pratique pour ajuster une icône, une image ou un petit badge à côté d'un texte.

Il faut cependant rester mesuré. Les valeurs numériques sont utiles pour un petit ajustement précis, mais elles deviennent vite difficiles à maintenir si la taille du texte ou la mise en page change.