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.
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.
