Inline-block est-il un substitut aux floats ?

Par Steven Bradley

Quand vient le moment de développer la mise en page avec CSS, float fait le plus gros du travail. Nous utilisons les éléments flottants pour les blocs importants comme une zone de contenu principale ou une colonne latérale ; nous y avons aussi recours pour les blocs de moindre taille à l’intérieur de ces blocs principaux. Mais les floats sont-ils toujours le meilleur choix?

Si les floats fonctionnent généralement sans problème, il peut parfois être délicat de les manipuler. C’est tout particulièrement compliqué quand il s’agit de blocs imbriqués, comme par exemple lorsqu’on veut organiser une grille d’images, mais qu’elles refusent de bien s’aligner. Une alternative existe : les blocs en lignes. Ils bénéficient de certains avantages des floats sans en présenter les inconvénients.

Les inline-block n’ont rien d’une nouveauté et il est possible que vous les utilisiez déjà. Ce n’était pas mon cas jusqu’à récemment. Il se trouve que les derniers sites que j’ai réalisés étaient destinés à des photographes. Naturellement, ce genre de site présente des grilles d’image. Pour les mettre en forme, j’ai privilégié inline-block à float.

Qu’est ce qu’un inline-block ?

Inline-block est l’une des valeurs possibles pouvant être assignées à la propriété display d’un élément. Cette valeur tient son nom du fait qu’elle regroupe certaines caractéristiques des éléments de type bloc et en ligne.

Lorsqu’on y pense, ce comportement n’est pas si éloigné de celui des éléments flottants. Les flottants forment des boîtes et se tiennent eux aussi côte à côte au lieu de s’organiser verticalement. L’un et l’autre ne sont bien sûr pas identiques, mais leur positionnement en ligne à l’extérieur et leur comportement en bloc à l’intérieur sont parfois les seules caractéristiques recherchées. Dans ce cas, un float ou un inline-block pourra être utilisé indifféremment.

La différence entre float et inline-block

Même si float et inline-block partagent quelques similitudes, il existe des différences bien précises entre les deux.


Tous les blocs ci-dessus ont une déclaration display: inline-block. À gauche, une espace est présente entre eux dans le code. À droite, l’espace a été retirée du HTML. Aucune autre différence.

Régler le problème de l’espace blanc

Cela est possible. Il est probable que vous voudrez utiliser plusieurs inline-block sans pour autant souhaiter l’espace entre eux. Il existe quelques méthodes pour le supprimer.

Quand utiliser les inline-blocks et quand utiliser les floats ?

Quand utiliser l’un ou l’autre dépend des spécificités de votre design, et de ce que vous tentez de réaliser. Si vous voulez que le texte s’écoule autour d’un élément, alors float est la réponse la plus évidente. Si vous voulez centrer un élément, inline-block est la meilleure option.
En définitive, votre choix découlera des différences entre inline-block et float, et des particularités de chacun qui vous sont nécessaires.


Les blocs ci-dessus flottent à gauche pour composer une grille. Le cinquième bloc [five] se retrouve coincé par le second [two] car ce dernier est le plus haut de sa rangée. C’est un problème récurrent lors de la création de grilles d’images.

Les floats, les inline-blocks et les grilles d’images

Dans mon cas, l’utilisation des inline-blocks m’est utile face au souci de l’alignement vertical. Je crois que cela doit être la même chose pour beaucoup de personnes qui commencent à les utiliser. J’ai dernièrement construit plusieurs sites pour des photographes et, bien entendu, ces sites sont inévitablement chargés de grilles d’images.

Les flottants sont plus efficaces si les images de la grille ont toutes la même hauteur. Dès que ce n’est plus le cas, c’est-à-dire la plupart du temps, les floats se retrouvent comme suspendus à côté de l’image la plus haute de la rangée supérieure. Ceci est dû au fait que les floats sont exclus du flux normal du document.

Les blocs en ligne n’ont pas ce problème puisqu’ils restent dans le flux. Quand une nouvelle rangée d’images doit être créée, la nouvelle rangée se positionne naturellement sous la précédente, de manière rectiligne. Pour avoir ce même comportement avec des éléments flottants, nous aurions besoin de savoir précisément sur quel flottant positionner la propriété clear (NDT : pour forcer un vrai retour à la ligne). Ceci peut poser problème dans le cas où les éléments sont générés dynamiquement. Dans ce cas précis, utiliser des blocs en ligne est bien plus naturel.
Voici une démonstration qui illustre le problème abordé plus haut et les différents résultats obtenus suivant la technique utilisée.


display: inline-block est appliqué aux blocs du dessus. Étant donné qu’ils ne sont pas exclus du flux du document, aucun des blocs ne se retrouve prisonnier des blocs de la ligne supérieure.

Les inline-blocks pour la navigation

Une autre application possible pour inline-block se trouve dans les barres horizontales de navigation. On y fait généralement flotter les liens pour ensuite les déclarer comme des éléments de type bloc. Je me vois également déclarer des items de liste comme inline. S’il vous faut jongler avec des valeurs inline et block pour utiliser float, inline-block représente alors peut‑être une meilleure solution.

Partout où vous avez besoin de ranger vos éléments en une ou plusieurs lignes, vous devriez songer à utiliser inline-block plutôt que float. Évidemment, des tableaux feraient eux aussi l’affaire dans ces circonstances. Après tout, ils sont faits pour aligner du contenu en lignes et colonnes.

Si vous construisez quelque chose de plus complexe nécessitant lignes et colonnes, alors un tableau HTML ou CSS peut être votre meilleure option, même si les inline-blocks restent à privilégier pour les constructions plus simples.

Conclusion

Les inline-blocks puisent parmi les caractéristiques des éléments en ligne vus de l’extérieur ; et des éléments de type block vus de l’intérieur. Cela les rend très similaires aux flottants à quelques différences près.

Ces différences vous aideront à choisir l’utilisation la mieux adaptée. Si vous rencontrez des problèmes avec l’alignement vertical ou le positionnement horizontal, vous serez plus enclin à utiliser un inline-block. Si vous avez besoin de plus de contrôle sur un seul élément et son interaction avec le contenu qui l’entoure, vous serez plus enclin à utiliser un float.
Bien entendu, un tableau peut s’avérer comme étant la meilleure option en fonction de ce que vous tentez d’accomplir.

Tout ceci n’est rien de nouveau, mais j’ai pensé qu’un article et une démonstration seraient utiles à quiconque n’aurait pas utilisé les blocs en ligne là où il aurait dû.

Fiche technique

À propos de l'auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site