Display
La propriété display définit le type d'affichage utilisé pour le rendu d'un élément.
Découverte
Observons et testons le code suivant :
See the Pen display inline-block by Flolec (@Flolec) on CodePen.
- Décommentez la ligne
display: inline;Qu'observez-vous concernant la<li>(position et largeur) ? - Supprimez la ligne
display: inline; - Décommentez la ligne
display: inline-block;Qu'observez-vous concernant la<li>(position et largeur) ?
Vous pouvez constatez qu'un léger écart est présent entre les deux <li>.
Inspectez le code. Voyez-vous une marge ?
D'où vient cet espace ?
- Dans le code html, supprimez l'indentation entre les
<li>.
En résumé
On peut modifier le display d’un élément en CSS pour adapter son comportement de mise en page. Les valeurs inline et inline-block sont particulièrement utiles :
display: inline transforme un élément de type bloc en élément de ligne. Ainsi, il s’insère dans le flux du texte et prend uniquement la largeur de son contenu. Toutefois, il ne permet pas de définir une largeur, une hauteur ou des marges et padding verticaux spécifiques.
display: inline-block combine les avantages d’un élément en ligne (s’insérant dans le flux de texte) et d’un élément de bloc. Contrairement à inline, il permet de définir explicitement la largeur, la hauteur, les margin et padding.
Ces options offrent une flexibilité accrue pour structurer des éléments de manière harmonieuse dans un flux de texte .
Attention, cette technique n'est pas adaptée pour réaliser complètement une mise en page. Nous verrons que le display: flex; est plus adapté.
Quand les éléments sont en display: inline-block, des espaces indésirables apparaissent souvent entre eux. Ces espaces proviennent des espaces blancs dans le code HTML lui-même (comme des sauts de ligne ou des espaces entre les balises). Le navigateur interprète ces espaces comme des espaces entre les éléments inline, et cela crée des espaces visibles.
Solutions pour éliminer ces espaces :
- Supprimer les espaces dans le code HTML
- Utiliser des commentaires HTML