Propriétés d’affichage CSS : bloc, en ligne et en ligne-bloc – & comment faire la différence
Les navigateurs web traitent chaque élément comme une sorte de boîte. Cependant, CSS a deux types différents de boîtes – bloc et en ligne.
Un élément bloc commence toujours sur une nouvelle ligne, et remplit l’espace horizontal à gauche et à droite sur la page Web. Vous pouvez ajouter des marges et du rembourrage sur les quatre côtés de tout élément bloc – haut, droite, gauche et bas.
Certains exemples d’éléments blocs sont les balises <div> et <p>. Comme indiqué ci-dessous, j’ai également ajouté un rembourrage vert sur les quatre côtés de chaque élément de bloc.
Éléments en ligne
Les éléments en ligne ne commencent pas sur une nouvelle ligne, ils apparaissent sur la même ligne que le contenu et les balises qui les accompagnent. Voici quelques exemples d’éléments en ligne : <span><strong>, et les balises <img>.
En ce qui concerne les marges et le rembourrage, les navigateurs traitent les éléments en ligne différemment. Vous pouvez ajouter de l’espace à gauche et à droite sur un élément en ligne, mais vous ne pouvez pas ajouter de hauteur au rembourrage ou à la marge supérieure ou inférieure d’un élément en ligne.
Les éléments en ligne peuvent en fait apparaître à l’intérieur des éléments de bloc, comme illustré ci-dessous. J’ai ajouté un padding blanc sur les côtés gauche et droit de chaque élément inline.
Inline-Block
Les éléments inline-block sont similaires aux éléments inline, sauf qu’ils peuvent avoir du padding et des marges ajoutés sur les quatre côtés. Vous devrez déclarer display : inline-block dans votre code CSS.
Une utilisation courante de l’utilisation de l’inline-block est la création de liens de navigation horizontaux, comme indiqué ci-dessous. J’ai créé un menu de navigation horizontal avec une couleur de fond orange.
Il existe également de nombreuses autres propriétés d’affichage, que vous pouvez vérifier via les docs MDN.
D.