CSS3 – notion de display : block, inline et none

LEÇON

 

La propriété display

Chaque élément dans un document HTML a sa forme d'affichage par défaut.

Exemples :

<span>du contenu</span>

  • la balise span n'interrompt pas le flux
  • le contenu de l'élément est dans la même ligne que les contenus autour
  • width et height n'ont pas de sens
  • on dit que le contenu est affiché "inline"

<div>du contenu</div> ou <p>du contenu</p>

  • les balises div et p interrompent le flux
  • le contenu de l'élément est entouré de retours à la ligne
  • le contenu peut s'étendre sur tout l'espace horizontal disponible
  • width et height sont applicables
  • on dit que le contenu est affiché en "block"

 

On peut changer la forme d'affichage par défaut avec la propriété display.

 

Exemple :

Recréer les fichiers suivants et ouvrir le fichier HTML dans un navigateur. Ensuite regarder la différence d'affichage quand on enlève les délimiteurs de commentaire autour de l'inclusion du fichier css css_display_1b.css

 

css_display_1a.css 

p
{
  color:blue;
}

div
{
  color:red;
}

span
{
  color:green;
}

 

css_display_1b.css

p, div
{
  display:inline;
}

span
{
  display:block;
}

 

css_display_1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Display block et inline</title>
        <link rel="stylesheet" type="text/css" href="css_display_1a.css">
        <!-- <link rel="stylesheet" type="text/css" href="css_display_1b.css"> -->
    </head>
    <body>
        <h1>Lorem ipsum dolor sit amet</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div>Nullam convallis non diam quis ornare.</div> Cras feugiat, elit vel laoreet commodo, nibh purus facilisis libero, eget porta odio turpis vel felis. <p>Vivamus fringilla fermentum sodales.</p> Aliquam at imperdiet nisi. Integer dignissim nec nisl at fermentum.
        <h1>Morbi egestas massa a justo</h1>
        Cras sollicitudin sed sem vel pellentesque. <span>Vivamus in elementum elit.</span> Cras sed vehicula nisi. Morbi egestas massa a justo tincidunt, ultrices accumsan libero vestibulum. Quisque venenatis justo turpis, sit amet lobortis felis efficitur sit amet.
    </body>
</html>

 

display:none

 

Pour faire disparaître du contenu de l'affichage on peut utiliser display:none

Ceci est utile par exemple dans le cas où on veut ensuite faire apparaître ce contenu via JavaScript.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Display none</title>

<script type="text/javascript" language="JavaScript"><!--
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

    </head>
    <body>
        <h1>FAQ</h1>
        <h3><a href="javascript:ReverseDisplay('q1')">Quelle est la réponse à la grande question sur la vie, l'univers et le reste ?</a></h3>
        <div id="q1" style="display:none;"><p>42.</p></div>
        <h3><a href="javascript:ReverseDisplay('q2')">Quelle est la question ?</a></h3>
        <div id="q2" style="display:none;"><p>Quel est le produit de six par neuf ?</p></div>
    </body>
</html>

 

display:inline-block;

 

L'élément s'affiche sans interrompre le flux (comme inline) mais s'affiche en forme de block. L'élément est inséré dans le flux mais width et height peuvent quand même être spécifiés.

Exemple :

 

body
{
  width:960px;
  margin:0 auto;
  background-color:#f8f8f8;
}

.my-inline-block
{
  color:white;
  background-color:#3d3058;
  width:400px;
  display:inline-block;
  padding:5px;
}

.my-inline-block img
{
  float:right;
  width:150px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Display inline-block</title>
        <link rel="stylesheet" type="text/css" href="css_display_3.css">
    </head>
    <body>
        <h1>Lorem ipsum dolor sit amet</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis non diam quis ornare. Cras feugiat, elit vel laoreet commodo, nibh purus facilisis libero, eget porta odio turpis <div class="my-inline-block"><img src="fleur1.jpg">Vivamus fringilla fermentum sodales. Cras sed vehicula nisi. Morbi egestas massa a justo tincidunt, ultrices accumsan libero vestibulum. Quisque venenatis justo turpis, sit amet lobortis felis efficitur sit amet. </div> vel felis. Aliquam at imperdiet nisi. Integer dignissim nec nisl at fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis non diam quis ornare. Cras feugiat, elit vel laoreet commodo, nibh purus facilisis libero, eget porta odio turpis vel felis.
    </body>
</html>

Affichage sous Chrome :

css_display_3

Mini-exercice : reproduire les fichiers ci-dessus, puis changer la propriété display de la div en "inline". Ouvrir la page dans un navigateur. Comment expliquer le résultat ?

 

La propriété vertical-align

Par défaut les éléments en display:inline ou en display:inline-block  peuvent sembler d'être alignés aléatoirement dans le sens vertical. Pour aligner verticalement les éléments on peut exploiter la propriété "vertical-align". Utilisez par exemple vertical-align:top pour aligner la limite supérieure des éléments, ou vertical-align:bottom pour aligner la limite inférieure des éléments.

 

Autres valeurs pour display

 

Page de référence : MDN : CSS display.

 

 


 

EXERCICES

 

1. Sans utiliser la propriété float, reproduire la page suivante. L'affichage doit s'adapter quand la fenêtre du navigateur est retaillée, comme évoqué par ces 3 échantillons d'affichage :

css_display_ex1_a

 

css_display_ex1_b

 

css_display_ex1_c