la propriété "display"

La propriété CSS display est la plus importante pour contrôler la mise en page. Chaque élément à une valeur display par défaut dépendante du type de l'élément. Les valeurs par défaut de la plupart des éléments sont block ou inline. Un élément block est souvent appelé un élément block-level. Un élément inline n'est jamais appelé autrement qu'un élément inline.

block

<div>

div est l'élément block-level standard. Un élément block-level commence sur une nouvelle ligne et s'étire autant qu'il peut sur la gauche et la droite. D'autres éléments block-level courant sont p et form, et les nouveaux en HTML5 sont header, footer, section, et plus.

</div>

inline

span est l'élément inline standard. Un élément inline peut encadrer du texte dans un paragraphe <span> comme ceci </span> sans interrompre le flux de ce paragraphe. L'élément a est l'élément inline le plus courant, puisque vous l'utilisez pour vos liens.

none

Une autre valeur display courante est none. Quelques éléments spéciaux comme script l'utilisent par défaut. display: none; est très utile pour masquer ou afficher facilement des éléments en CSS ou en Javascripts sans avoir à les supprimer et les recréer dans le DOM.

Ne confondez pas display: none; et visibility: hidden; ! display: none; masque totalement l'élément et annule des propriétés telles que margin, padding, width, height...tandis que visibility: hidden; masque seulement l'élément, ce qui peut laisser des espaces vides.

You found me!

d'autres valeurs pour display

Display possède une quantité d'autres valeurs exotiques, comme list-item et table. Voici une liste exhaustive. Nous discuterons de inline-block et flex plus tard.

bonus

Comme je le disais, chaque élément a un type display par défaut. Cependant, vous pouvez toujours les écraser ! Même si ça n'a pas beaucoup de sens de rendre une div inline, vous pouvez faire cela pour customiser des éléments qui ont une sémantique particulière. Un exemple courant est de rendre inline les éléments li pour faire des menus horizontaux.

  • Creative Commons License
  • Ads by Bocoup