Conception & Réalisation de sites Web

La propriétés «display»

Deux comportements d'affichage différents

Chaque balise donne un résultat différent. Nous pouvons cependant distinguer 2 grands types d'affichage :

  • Les balises s'affichant en "block" (bloc) : elles prennent toute la largeur disponible et s'affichent avec un saut de ligne avant et après.
  • Les balises s'affichant en "inline" (dans la ligne) : elles prennent uniquement la largeur dont elles ont besoin, sans ajouter de saut de ligne.

Exemples de balises HTML qui s'affichent naturellement en block

  • <div> (cf plus bas)
  • Les balises de titre : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • La balise paragraphe : <p>
  • Les balises de liste : <ul>, <ol>, <li>
  • La balise de citation : <blockquote>
  • Les balises de tableaux : <table>
  • ...

Exemples de balises HTML qui s'affichent naturellement en inline

  • <span> (cf plus bas)
  • <a> (lien)
  • <strong> (gras), <em> (italic), <u> (souligné)
  • <img> (image)

Exemples

Par exemple, étudier la différence de comportement entre une balise <p> et <strong> :

Mon texte
   <p style="background-color:#ffcc00;">Cette balise s'affiche comme en "block".</p>
   Mon texte 2
   <strong style="background-color:#00ccff;">Cette balise s'affiche en "inline".</strong>
Mon texte 3

Ce qui donne dans votre navigateur :

Mon texte

Cette balise s'affiche comme un bloc.

Mon texte 2 Cette balise s'affiche en "inline". Mon texte 3

Important ! Certains styles ne fonctionne correctement uniquement sur les balises se comportant en "Block" ! Par exemple : width, height, padding, margin… En effet, ces propriétés sont contraires à la notion d'affichage "dans la ligne" ("inline").

Par exemple, dans le code suivant je donne les mêmes hauteurs et largeur à ma balise "<p>" et à ma balise "<strong>" :

Mon texte
   <p style="background-color:#ffcc00; width:200px; height:60px; padding:5px;">mon bloc</p>
   Mon texte 2
   <strong style="background-color:#00ccff; width:200px; height:60px; padding:5px;">mon affichage "inline".</strong>
Mon texte 3

Mais dans votre navigateur, le résultat est bien différent :

Mon texte

mon bloc

Mon texte 2 mon affichage "inline". Mon texte 3

La propriété display

Nous pouvons modifier ce comportement d'affichage "block" / "inline" en feuille de style avec la propriété «display».

Ainsi nous pouvons par exemple afficher une balise <strong> comme un bloc ou une balise <p> en inline.

La propriété display permet également de masquer un élément si on lui donne la valeur "none" ("aucun" en français).

display / exemple : display:block;
Modifie le comportement d'affichage d'un élément
Valeurs :Résultat dans le navigateur :
block

Affichage en bloc (avec un saut de ligne avant et après)

inline

Affichage en ligne ( à la suite, sans saut de ligne)

none

Masque l'élement (aucun affichage)

 

<p style="background-color:cyan;">Exemple A</p>
<p style="background-color:cyan; display:inline;">Exemple B</p>
<strong style="background-color:yellow;">Exemple C</strong>
<strong style="background-color:yellow; display:block;">Exemple D</strong>
<strong style="background-color:red; display:none">Exemple E</strong>

Exemple A

Exemple B

Exemple C Exemple D Exemple E

Reprenons notre exemple précédent : cette fois nous allons forcer notre balise "strong" à s'afficher comme un bloc…

Mon texte
   <p style="background-color:#ffcc00; width:200px; height:60px; padding:5px;">mon bloc</p>
   Mon texte 2
   <strong style="display:block; background-color:#00ccff; width:200px; height:60px; padding:5px;">mon affichage "inline".</strong>
Mon texte 3

Du coup, les styles "width" et "height" sont désormais respectés :

Mon texte

mon bloc

Mon texte 2 mon affichage "inline". Mon texte 3

Les balises DIV et SPAN

Voici 2 nouvelles balises ! Nous ne les avions pas vues à ce jour, car elles ne sont utiles qu'avec les feuilles de style :

  • La balise "<div>" ("division") : c'est la plus simple des balises s'affichant en "block" ; elle crée simplement un nouveau bloc sans marges ni enrobement (padding). Elle est cependant très utiles pour créer des sections dans son code HTML.
  • La balise "<span>" : c'est la plus simple des balises s'affichant en "inline". Seule, elle n'a aucun effet sur le rendu du code html. Cependant, elle devient très utile lorsqu'on lui attribut des styles.

Par exemple, étudier ce code; :

   Mon texte <div>contenu du div</div> Mon texte 2 <span>contenu du span</span> Mon texte 3

Ce qui donne dans votre navigateur :

Mon texte
contenu du div
Mon texte 2 contenu du span Mon texte 3

Maintenant, en ajoutant des styles :

<style type="text/css">
div {color:green; padding:5px; background-color:yellow;}
span {color:red; font-style:oblique;}
</style>
Mon texte <div>contenu du div</div> Mon texte 2 <span>contenu du span</span> Mon texte 3

Ce qui donne dans votre navigateur :

Mon texte
contenu du div
Mon texte 2 contenu du span Mon texte 3
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!