Propriété display en CSS

La propriété display permet de définir le type de rendu à utiliser d'un élément. Par exemple, le langage XHTML utilise des balises qui sont de type bloc et inline et qui ont un comportement bien définit si on utilise pas de CSS.

display:bloc et display:inline

Si nous prenons comme exemple la balise de paragraphe <p></p>, nous savons qu'elle procure un rendu de type bloc, c'est à dire qu'une succession de paragraphes seront toujours les un sous les autres et jamais sur une même ligne.

Exemple :

<p>Premier paragraphe</p>
<p>Second paragraphe</p>

Donne comme résultat:

Premier paragraphe

Second paragraphe

Au contraire, les balises dit "inline" du type <em></em> ou <span>/span>, etc.. sont des balises que l'ont peut faire succèder sur une même ligne.

Exemple :

<em>Premier texte</em>
<em>Second texte</em>
Résultat:
Premier texte Second texte

C'est là qu'intervient la propriété display qui peut nous permettre de modifier le rendu de ces éléments.

Reprenons l'exemple de la balise paragraphe (type bloc) auquel nous ajoutons une class CSS utilisant la propriété display de type inline (j'ajoute une bordure noir pour que vous visualisez bien la différence) :

p{display: inline;
border:1px solid #000;
}
Exemple:

Premier paragraphe

Second paragraphe

Et voila, notre élément qui est normalement de type bloc est maintenant, grâce au CSS, de type inline.

Reprenons maintenant notre exemple avec la balise <em></em> qui est de type inline auquel nous ajoutons une class CSS utilisant la propriété de type bloc:

em{display:block;
border:1px solid #000;
}
Résultat:
Premier texte Second texte

display:none

La valeur none associé à l'élément display permet de désactiver (cacher) l'affichage d'un élément. Nombreuses sont les utilisations liés à cette valeur associé à d'autre langage comme le Javascript. Vous pouvez voir cette valeur en action sur ce site dans les différentes catégories en cliquant sur les descriptions grisés à côté de la flèche par exemple : Créer un site dynamique.

Exemple :

p{
display:none;
}

Cette class CSS attribué à la balise <p></p> désactive tout le contenu situé dans celle-ci.Attention, ne vous en servez pas à mauvais escient !!!

display:inherit

La valeur inherit définit la valeur de cette propriété comme étant celle de l'élément parent.C'est à dire que la propriété hérite du style de l'élément parent.

Nombreuses sont les valeurs associés à l'élément display et loin de moi de toutes les comprendres ... je vous invites donc à faire un petit détour du côté de ce tutoriel display.

Voir/déposer un commentaire (0) | Signaler un problème