Médiaforma

Positionnement inline-block

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la rubrique précédente, vous avez vu qu’il était possible d’affecter le type block à un élément inline et inversement. Malheureusement, les éléments initialement block transformés en inline ne peuvent pas être dimensionnés en utilisant les propriétés width et height.

En affectant la valeur inline-block à la propriété display d’un élément de type block ou inline, nous allons voir que ceci est possible !

Examinons le code suivant :

Le corps du document définit deux balises <div> de classe il et deux autres de classe ilb.

La ligne 5 définit les dimensions des quatre balises <div> : 100x100px.

La ligne 6 affecte le type inline aux balises de classe il.

Enfin, la ligne 7 affecte le type inline-block aux balises de classe ilb.

Exécutons ce code dans un navigateur. Comme vous pouvez le voir, le balises <div> de type inline ne sont pas sensibles aux propriétés width et height. Par contre, les balises <div> de type inline-block tiennent compte de ces propriétés :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply