Temps de lecture approximative : 6 minutes

Chapitre 3 - Propriété display:

Chaque élément HTML a une valeur de la propriété display: par défaut. La valeur varie d'un élément à l'autre. Tout dépend du type de l'élément. La valeur par défaut pour la plupart des éléments est block ou inline. Nous nous focaliserons sur ces deux valeurs qui sont les plus répandues. Depuis l'arrivée du CSS3, il existe bien plus que deux valeurs pour display:. Cette propriété correspond au type de boîte. Nous reviendrons sur la notion de boîte plus précisément dans le chapitre suivant.

Élément de type block

Un élément de type block commence toujours sur une nouvelle ligne et occupe toute la largeur disponible. Il s'étire de la gauche vers la droite aussi loin que possible.

Ci-après un extrait des éléments qui ont pour valeur par défaut block :

  • <p>
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <div>
  • <form>

Élément de type inline

A contrario d'un élément de type block, un élément de type inline ne démarre pas sur une nouvelle ligne et ne prend seulement que la largeur dont il a besoin.

Ci-après un extrait des éléments qui ont pour valeur par défaut inline :

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

Exemple

Pour mettre en relief cette propriété, nous en utiliserons une autre : border:. Elle permet de tracer et de mettre en forme les extrémités d'un élément. Nous l'étudierons plus précisément un peu plus tard. Dans notre cas à nous, cela va nous permettre de bien voir la différence entre les deux valeurs. Tout de suite un exemple.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Titre de la page affiché dans la barre du navigateur</title>
      <link rel="stylesheet" href="style.css" />
   </head>

   <body>
      <p> Numne, si <span>Coriolanus</span> habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num <strong>Maelium</strong> debuerunt iuvare?</p>
      <p>Eo quoque accedente quod et <strong>Nomenclatores</strong> adsueti haec, mercede accepta lucris quosdam et prandiis inserunt subditicios <span>Ignobiles</span> et obscuros.</p>
   </body>
</html>

p {
   border: 3px red solid;
}
span {
   border: 3px green solid;
}
strong {
   border: 3px blue solid;
}

Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?

Eo quoque accedente quod et Nomenclatores adsueti haec, mercede accepta lucris quosdam et prandiis inserunt subditicios Ignobiles et obscuros.

Cet exemple permet de mettre en évidence le fait que les éléments de type block occupent bien toute la largeur et créent une nouvelle ligne, tandis que les éléments de type inline occupent seulement la place dont ils ont besoin.

Élément de type none

Cette autre valeur de display: est très simple à comprendre. Elle permet de masquer un élément et ses enfants. Le navigateur ne tiendra tout simplement pas compte des éléments ayant la valeur none pour la propriété display:.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Titre de la page affiché dans la barre du navigateur</title>
      <link rel="stylesheet" href="style.css" />
   </head>

   <body>
      <p> Numne, si <span>Coriolanus</span> habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num <strong>Maelium</strong> debuerunt iuvare?</p>
      <p id="invisible">Eo quoque accedente quod et <strong>Nomenclatores</strong> adsueti haec, mercede accepta lucris quosdam et prandiis inserunt subditicios <span>Ignobiles</span> et obscuros.</p>
   </body>
</html>

p {
   border: 3px red solid;
}
span {
   border: 3px green solid;
}
strong {
   border: 3px blue solid;
}
#invisible {
   display: none;	
}

Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?

Vous pourrez également rencontrer le terme de type de boîte qui fait référence à cette notion. La compréhension de cette notion est importante en CSS.

Chapitre précédentChapitre suivant