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

Exemples de l’article

Utiliser display: inline-block

Il s’agit de la valeur par défaut des éléments input.
C’est pour cela que l’utilisation de cet élément est aussi simple : il reste à côté de votre label, vous pouvez en changer sa largeur, sa hauteur, ses marges, 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…)
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>

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

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 transformation 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 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;
}

(*)correction Raphaël
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 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é.

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. Pour cela nous appliquons la valeur nowrap à cette propriété sur le conteneur. Cette valeur étant héritée, nous restaurons la valeur par défaut sur les enfants du conteneur.

.container {
	width: 900px;
	white-space: nowrap;
}
.container div {
	display: inline-block;
	width: 300px;
	white-space: normal;
}

Aperçu

Edit : Après l’intervention de Raphaël j’ai effectué quelques tests qui montrent que la suppression des espaces n’est pas effective. Les éléments sont bien alignés mais dépassent de leur parent. Pourtant la méthode permet bel et bien un alignement des éléments et est comprise par tous les navigateurs que j’ai pu tester (Safari, Chrome, Firefox, IE>7, Opera, sous XP, Vista et Seven)…
Voici cependant une solution apportée par Raphaël (toujours le même) sur son espace de jeu : http://www.ie7nomore.com/fun/white-space/, ici l’aspect « root em » (rem) ne nous intéresse pas (bien que je vous invite à découvrir son utilité), c’est 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.

Une fois ce travail d’alignement effectué, il arrivera probablement que le contenu ne soit pas aligné à la vertical 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).

Petit exemple pour la route

Merci pour votre lecture 😉
N’hésitez pas si vous avez des exemples ou des contre-exemples d’utilisation…