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 :

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 :

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).

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 :

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 :

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 :