Mise en page CSS - Propriété display

display C'est la propriété CSS la plus importante pour le contrôle du layout.

Propriété display

display Cette propriété détermine si/la manière dont l'élément doit être affiché.

Chaque élément HTML a une valeur par défaut de display, qui dépend de son type d'élément. La plupart des éléments ont une valeur par défaut de display block ou inline.

Cliquez pour afficher le panneau

Ce panneau contient un élément <div>, qui est par défaut caché. (display: none)

Il est mis en forme par CSS, et nous l'affichons avec JavaScript (passer à display: block)

Élément en bloc (block element)

Les éléments en bloc commencent toujours une nouvelle ligne et occupent toute la largeur disponible (étendant le plus possible à gauche et à droite).

Ce <div> est un élément en bloc.

Voici quelques exemples d'éléments en bloc :

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Élément en ligne (inline element)

Les éléments en ligne ne commencent pas une nouvelle ligne et ne prennent que la largeur nécessaire.

C'est le paragrapheL'élément <span> en ligne.

Voici quelques exemples d'éléments en ligne :

  • <span>
  • <a>
  • <img>

Display: none;

display: none; est généralement utilisé avec JavaScript pour masquer et afficher des éléments sans les supprimer et les recréer. Si vous souhaitez savoir comment réaliser cet objectif, consultez le dernier exemple de cette page.

Par défaut,<script> Les éléments utilisent display: none;.

Remplacer la valeur display par défaut

Comme mentionné précédemment, chaque élément a une valeur display par défaut. Cependant, vous pouvez la remplacer.

Changer un élément en ligne en élément en bloc, et vice versa, est utile pour faire apparaître la page d'une manière spécifique tout en suivant les normes du Web.

Un exemple commun consiste à générer des éléments en ligne pour créer un menu horizontal. <li> Élément :

Exemple

li {
  display: inline;
}

Essayer par vous-même

Attention :La définition de l'attribut display ne changera queLa manière dont l'élément est affichéet ne change pas le type de l'élément. Par conséquent, l'élément display: block; Les éléments en ligne ne permettent pas d'inclure d'autres éléments en bloc à l'intérieur.

L'exemple suivant affiche l'élément <span> comme un élément en bloc :

Exemple

span {
  display: block;
}

Essayer par vous-même

L'exemple suivant affiche l'élément <a> comme un élément en bloc :

Exemple

a {
  display: block;
}

Essayer par vous-même

Masquer un élément - display: none ou visibility: hidden ?

display: none

visibility: hidden

Réinitialiser

En utilisant display l'attribut est réglé sur none Il est possible de masquer un élément. Cet élément sera masqué et la page semblera que cet élément ne soit pas présent :

Exemple

h1.hidden {
  display: none;
}

Essayer par vous-même

visibility: hidden; Il est également possible de masquer un élément.

Cependant, cet élément continuera à occuper l'espace précédemment alloué. Il sera masqué, mais continuera à affecter la mise en page :

Exemple

h1.hidden {
  visibility: hidden;
}

Essayer par vous-même

Plus d'exemples

Différences entre display: none; et visibility: hidden;
Cet exemple montre display: none; VS visibility: hidden;
Combinaison de CSS et JavaScript pour afficher du contenu
Cet exemple montre comment utiliser CSS et JavaScript pour afficher un élément au clic.

Propriétés Display/Visibility CSS

Attribut Description
display Déterminer comment l'élément doit être affiché.
visibility Déterminer si un élément doit être visible.