CSS DisplayetVisibility

La propriété display définit comment un élément doit être affiché, et la propriété visibility spécifie si un élément doit être visible ou masqué.

Boîte 1

Boîte 2

Boîte 3

Éléments masqués - display:none ou visibility:hidden

Masquer un élément peut se faire en définissant la propriété display sur "none", ou en définissant la propriété visibility sur "hidden". Toutefois, veuillez noter que ces deux méthodes produisent des résultats différents.

visibility:hidden peut masquer un élément, mais l'élément masqué occupe toujours le même espace qu'avant d'être masqué. En d'autres termes, bien que l'élément soit masqué, il affecte toujours la mise en page.

Exemple

h1.hidden {visibility:hidden;}

Essayez-le vous-même »

display:none peut masquer un élément, et l'élément masqué n'occupe aucun espace. En d'autres termes, non seulement l'élément est masqué, mais l'espace qu'il occupait initialement disparaît également de la mise en page.

Exemple

h1.hidden {display:none;}

Essayez-le vous-même »

CSS Display - éléments de bloc et en ligne

Un élément de bloc est un élément qui occupe toute la largeur et qui comporte des sauts de ligne avant et après lui.

Exemples d'éléments de bloc :

<h1>
<p>
<div>

Un élément en ligne n'occupe que la largeur nécessaire et ne force pas de sauts de ligne.

Exemples d'éléments en ligne :

<span>
<a>

Comment modifier l'affichage d'un élément

Vous pouvez transformer des éléments en ligne en éléments de bloc et inversement, ce qui peut donner à la page l'apparence d'un assemblage particulier tout en respectant les standards du web.

L'exemple suivant affiche les éléments de liste comme des éléments en ligne :

Exemple

li {display:inline;}

Essayez-le vous-même »

L'exemple suivant affiche un élément span comme un élément de bloc :

Exemple

span {display:block;}

Essayez-le vous-même »

Remarque :Modifier le type d'affichage d'un élément affecte la façon dont il est affiché, et non le type d'élément dont il s'agit. Par exemple, un élément en ligne défini sur display:block ne peut pas contenir d'éléments de bloc imbriqués.