Display inline-block, une valeur trop peu utilisée

Floatera, floatera pas… mais pourquoi ne pas utiliser la valeur inline-block de la propriété display en CSS ?

Vous connaissez certainement les valeurs block ou inline, mais moins celle de inline-block et pourtant elle peut vous servir dans bien des cas.

Voyons dans quelles conditions nous pouvons l'utiliser (de manière non exhaustive) dans un premier temps, puis dans un second temps quelques difficultés dans son utilisation.

Cette astuce a été publiée initialement sur le blog personnel de l'auteur, creativejuiz.fr à la date du Jeudi 17 mars 2011.

Utiliser display: inline-block

Par défaut les éléments input ont comme valeur de display celle de inline-block. C'est pour cela que l'utilisation de ces éléments HTML sont simples : ils restent à côté de votre label associé, et vous pouvez en changer sa largeur, sa hauteur, ses marges, son alignement vertical, etc.

Le formulaire

Quelle transition ! « Bon allez, c'est juste pour le formulaire, je vais utiliser un tableau de mise en page pour ne pas m'embêter ».
Je le lis et le vois encore souvent dans les codes sources (et je l'eus fait), et même récemment sur un site communal d'une ville du grand Est.
Si ce n'est pas du tableau ce sera un jeu de float et de clear.

Je vous propose cette forme de mise en page pour formulaire.

Dans cette mise en page les label passent d'un display à valeur inline à un display: inline-block;
Un élément en inline-block peut recevoir une valeur de vertical-align qui, par défaut, ne semble pas être la même sur IE et sur les autres navigateurs.

Notre code CSS va donc nous permettre d'avoir un comportement homogène.
Le HTML :

<form name="my_form" action="#result" method="post">
	<p> <label for="nom">Nom</label> <input type="text" id="nom"> </p>
	<p> <label for="email">E-mail</label> <input type="e-mail" id="email"> </p>
	<p> <label for="sujet">Sujet</label> <input type="text" id="sujet"> </p>
	<p> <label for="message">Message</label> <textarea id="message"></textarea> </p>
</form>

La CSS :

input, textarea {
	/*déjà en inline-block*/
	width: 150px;
	padding: 4px;
	vertical-align: top;
}
#sujet { width: 250px; }
textarea {
	width: 300px;
	height: 5em;
}
label {
	display: inline-block;
	width: 100px;
	margin-right: 20px;
	vertical-align: top;
	text-align: right;
}

Aperçu du formulaire

Une navigation horizontale (éléments de liste)

Le deuxième cas où l'on peut remplacer aisément le float par du inline-block c'est celui d'une liste dont on souhaite dimensionner les liens placés sur une seule ligne.
La valeur par défaut d'un <li> pour la propriété display est list-item. Cette valeur est connue pour ses styles par défaut (margin-start plus ou moins élevée, puce de liste de type disc, saut de ligne, etc.).

Cette valeur par défaut du display va nous poser problème si on veut placer tous nos liens sur une seule ligne.
Qu'à cela ne tienne, il nous suffit d'appliquer la valeur inline à la propriété display :

Le code HTML :

<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
</ul>

Le code CSS :

li {
	display: inline;
	list-style: none; /* pour enlever les puces sur IE7 */
	margin: 10px;
}

Ce tronçon est plutôt simple, mais il a le mérite de supprimer les styles par défaut de notre liste.

Remarque : la valeur inline sur le li est suffisante dans mon exemple. Pour des styles plus complexes, il est possible d'utiliser la valeur inline-block, mais celle-ci va poser des problèmes, précisés plus loin dans cet article.

Les liens sont un peu collés si on en reste là, on va donc leur appliquer de nouveaux styles :

li a {
	display: inline-block;
	width: 100px;
	padding: 5px 10px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	background: #999;
} 

Aperçu

Le lien ainsi stylé peut subir autant de transformations que vous le désirez, lui appliquer un background et lui donner les dimensions que vous souhaitez devient un jeu d'enfant.

Quelques soucis…

Oui il y en a, sinon ça ne serait pas marrant !

Le cas Internet Explorer

En effet lorsque l'on souhaite appliquer un inline-block sur un élément, la valeur est prise en compte par IE uniquement si celle par défaut de l'élément est inline.
Pour les cas précédents, nous avions un <label> à placer en inline-block, ceci n'a pas posé de problème car la valeur par défaut de son display est inline (idem pour l'élément <a>).
Dans l'exemple suivant nos éléments sont par défaut en block. Le remplacement de cette valeur par inline-block ne sera pas compris par IE (version inférieure à 8).

Mais il y a une astuce.
Sur une feuille de style alternative (code à placer entre les balises <head>) :

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="styles-ie7.css" />
<![endif]-->

il vous faudra préciser (dans votre CSS) :

element { 
   zoom: 1; /*offre le layout à un élément (*)*/
   display: inline;
}

(*) Pour IE un élément inline qui possède le Layout aura le même comportement qu'un inline-block.

Le problème white-space

Venons-en à l'exemple.
Pour une raison qui ne nous intéresse pas, je souhaite afficher trois divisions les unes à côté des autres, je sais que la place disponible en largeur est de 900px :

<div class="container">
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
</div>

En utilisant ce code CSS je devrais pouvoir afficher mes éléments les uns à côté des autres :

.container {
	width: 900px;
}
.container div {
	display: inline-block;
	width: 300px;
}

En effet chaque div fait normalement 300px de largeur, comme nous en avons trois nous rentrons précisément dans les 900px du conteneur.
Sauf que l'indentation de notre code fait apparaître un espace blanc (white-space) d'environ 3/4px entre chaque élément.

Une des solutions est de ne plus indenter la partie du code concernée. Cela vous obligerait à accepter de ne plus « aérer » certaines parties de votre code... pas super pour la lisibilité. Cependant ça ne pose pas de problème si vous effectuez une minification de votre code HTML en fin de projet ou côté serveur.

Une autre solution consiste en l'utilisation de commentaires HTML, de cette manière :

<div class="container exemple"><!--
	--><div><p>Lorem Elsass ipsum bredele [...]</p></div><!--
	--><div><p>Lorem Elsass ipsum bredele [...]</p></div><!--
	--><div><p>Lorem Elsass ipsum bredele [...]</p></div><!--
--></div> 

Pas super pratique, surtout si pour le code généré vous n'avez pas entièrement la main dessus (plugins ou fonctions WordPress, ou pas envie de tout modifier).

La dernière solution est de passer par du CSS.
Il nous faut « supprimer » le white-space entre les div.

Voici une discussion intéressante apportée par Raphaël : display-inline: block; et espaces indésirables, il s'agit de la simple annulation de la valeur font-size sur le parent qui est intéressante. Elle a pour effet de supprimer les espaces indésirables, mais vous oblige à utiliser une valeur de corps en pixels pour les enfants tant que le navigateur ne reconnaît pas l'unité fluide "rem".

Alignement vertical

Une fois ce travail d'alignement effectué, il arrivera probablement que le contenu ne soit pas aligné à la verticale comme vous le souhaitez.
Pour cela je vous rappelle que nous avons la propriété CSS : vertical-align.
Souvent bien pratique de choisir la valeur top pour placer les éléments en haut de leur conteneur, il vous arrivera probablement de devoir aligner les éléments entre eux de manière centrée (middle) ou tout en bas du conteneur (bottom). (voir les autres valeurs de vertical-align)

Petit exemple pour la route

Merci pour votre lecture. N'hésitez pas si vous avez des exemples ou des contre-exemples d'utilisation.

Liens utiles

• Display inline-block sur Creative Juiz
• Un vieil article des Intégristes
• Valeurs avancées de la propriété display sur Alsacréations
• CSS avancées: Vers HTML 5 et CSS 3, Le super nouveau livre de Raphaël Goetter (site officiel)