Inline-block est-il un substitut aux floats ?
Par Steven Bradley
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.
- Les éléments de type bloc génèrent des boîtes selon le modèle de boîtes CSS. Ils peuvent avoir une largeur (
width), une hauteur (height), des bordures et des marges intérieures et extérieures (paddingetmargin). Ils s’organisent verticalement les uns au-dessus des autres. - Les éléments en-ligne ne forment pas de boîtes. Ils se suivent horizontalement. (NdT : Ils génèrent en fait des boîtes de ligne : voir indications du W3C.)
- Les éléments de type blocs-en-ligne, de l’intérieur, se comportent comme des éléments de type bloc : ils forment des boîtes. Vus de l’extérieur, ils se comportent tels des éléments en-ligne, se suivent horizontalement au lieu de s’empiler.
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.
- Flux du document – Les flottants sont retirés du flux normal, permettant ainsi aux éléments qui les suivent de flotter autour d’eux ; les blocs en ligne restent dans le flux du document. Ainsi, il n’est pas nécessaire d’avoir recours à des techniques telles que
clearfixouoverflow:hidden. Ainsi, les éléments suivant un « inline-block » ne peuvent pas habiller ce dernier, et on ne peut pas forcer un élément à passer sous un « inline-block » avec la propriétéclear. - Positionnement horizontal – Un exemple concret serait des floats qui ne peuvent être centrés avec un
text-align: centerplacé sur leur parent. De plus, aucun style de positionnement appliqué au parent d’un flottant n’aura d’influence sur ce dernier. À l’inverse, le parent d’un inline-block peut affecter sa position. - Alignement vertical – Les inline-blocks s’alignent par défaut sur la ligne de base du texte. Les floats s’alignent en haut de leur parent. Il est possible de changer ce comportement par défaut pour les inline-blocks et ainsi contrôler où ils seront alignés verticalement, ce qui n’est pas le cas pour les floats. C’est principalement pour cette raison que j’ai eu davantage recours aux inline-blocks.
- Espaces blancs – Les inline-blocks obéissent aux espaces présents dans le HTML (NdT : que ce soit une espace simple, une tabulation ou un retour chariot). Si plusieurs éléments inline-block sont chacun déclarés sur une nouvelle ligne dans le code HTML, ils s’afficheront de chaque côté d’un espace horizontal. Les éléments flottants se tiendront eux les uns à côté des autres indépendamment des espaces présents dans le balisage.
- IE6 et IE7 – Les blocs en ligne ne sont pas supportés ou n’ont qu’un support partiel dans Internet Explorer 6 et 7. Si vous avez besoin de prendre en charge ces versions du navigateur, vous aurez besoin d’une alternative.
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.
- Supprimez tout espace dans le balisage (NDT : tabulations et retours à la ligne compris) – Affranchissez-vous des retours chariot entre les éléments de type inline-block. Il ne s’agit pas de la solution la plus élégante, mais elle est efficace, surtout si vous n’avez que quelques éléments.
- Utilisez des marges négatives – Il vous faudra prendre en compte la taille de la fonte car les espaces sont calculées en fonction de cette valeur. J’aime à penser qu’il s’agit de 0,25em, mais n’étant pas sûr, laissez un commentaire si vous en savez plus sur le sujet.
- Appliquer une taille de police de 0 au parent – Qu’importe la taille de l’espace, une taille de texte nulle implique que l’espace sera lui aussi nul. Il sera alors évidemment nécessaire d’attribuer une nouvelle taille pour tous les enfants qui en auraient besoin.
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.
- Utilisez inline-block… lorsque vous avez besoin d’un plus grand contrôle sur l’alignement vertical et le positionnement horizontal des éléments.
- Utilisez float… lorsque vous attendez des autres éléments qu’ils s’agencent autour d’un élément spécifique, lorsque vous désirez un support pour les versions plus anciennes d’Internet Explorer ou souhaitez éviter la problématique de l’espace entre éléments.
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û.
http://www.vanseodesign.com/css/inline-blocks/