Propriété float ou Inline-block ?

inline Block

Parmi les propriétés utilisées pour positionner des blocs, il semblerait que la propriété CSS float est celle qui est la plus utilisée.
Toutefois, dans certains cas, il est assez délicat de les manipuler surtout lorsqu’il s’agit de blocs imbriqués comme une grille d’images refusant de s’aligner correctement ou le cas des menus (nav).
Pour éviter des complications, il existe une alternative qui est l’utilisation des inline-block. Ces derniers empruntent certains avantages des floats, mais pas leurs inconvénients.

Qu’est-ce que l’Inline-block ?

Un petit rappel, un bloc doit être originellement in-block ou inline.
Cependant, il peut prendre la valeur inline-block qui peut être assigné à la propriété display.

L’appelation inline-block

Cette valeur tient son nom du fait qu’elle regroupe certaines caractéristiques des éléments de type block et inline.
Il faut savoir que les éléments de type block fonctionnent selon le modèles de boîtes CSS.
Ces derniers peuvent avoir une hauteur(height), une largeur(width) ainsi que des marges intérieures et extérieures (margin /padding).
L’organisation de ceux-ci se fait les uns au-dessus des autres.

Concernant les éléments inline, ceux-ci ne forment pas de boîte, mais se suivent de façon horizontale.
Pour les éléments de type inline-block, vu de l’intérieur, ces derniers se comportent comme des éléments de type bloc formant des boîtes.
Du point de vue extérieur, ces éléments se comportent comme des éléments inline. Au lieu de s’empiler, ils se suivent.

Lorsqu’on regarde de plus près, le comportement de ces éléments n’est pas très loin de celui des éléments flottants. br>Effectivement puisque les flottants forment des boîtes se tenant eaux aussi côte à côte au lieu de s’organiser de manière verticale.

La différence entre float et inline-block

Il faut savoir que même si inline-block et float possèdent quelques similarités, il va s’en dire qu’il y a des différences biens distinctes entre ces deux propriétés :

  • Le positionnement horizontal
    Prenons un exemple avec des floats ne pouvant être centrés avec un text-align : center placé sur leur parent.
    Aucun style de positionnement appliqué au parent d’un flottant n’aura d’influence sur celui-ci contrairement au parent d’un inline-block pouvant affecter sa position.

  • Alignement vertical
    Pour ce qui est des floats, ces derniers s’alignent en haut de leur parent.
    Pour le cas inline-block, ces derniers s’alignent par défaut sur la ligne de base du texte.
    La différence entre eux c’est qu’il est possible pour inline-block de changer le comportement par défaut pour contrôler leur alignement vertical ce qui n’est pas le cas pour les floats.

  • Flux du document
    En retirant les flottants du flux normal, cela permet aux éléments les suivant de flotter autour d’eux tandis que les blocs inline restent dans le flux du document.
    Ainsi, il ne sera pas nécessaire de recourir à des techniques comme overflow: hidden ou clearfix.

  • IE6 et IE7
    Les inline-block sont malheureusement pas supportés ou ne sont supportés que partiellement dans IE6 et 7.
    Dans le cas où il y a nécessité de prendre en charge ces versions du navigateur, il sera nécessaire de chercher une alternative voir ici.

  • Espaces blancs ou white space
    Il faut savoir que les inline-block obéissent aux espaces présents dans le HTML.
    Dans le cas où plusieurs éléments sont déclarés sur une nouvelle ligne dans le code HTML, ces derniers s’afficheront de chaque côté d’un espace horizontal.
    Tandis que les éléments flottants se tiendront les uns à côté des autres individuellement par rapport aux espaces présents dans le balisage.( voir ici pour approfondir le sujet)

Répondre