Tutoriel CSS - Leçon 4 - La propriété display. Différence entre div et span.
Dans les leçons précédentes, nous avons lié le CSS via un fichier et écrit un peu de code CSS pour voir comment tout cela fonctionne. Dans cette leçon, nous allons examiner une propriété importante : display. La propriété display détermine comment une balise est affichée dans un document HTML, si elle sera placée comme un texte en ligne ou si c’est un bloc qui a sa propre hauteur et largeur. Alors, commençons par la chose la plus simple, comment les balises sont affichées par défaut, car elles s’affichent différemment : <div> s’affiche comme un bloc, <span> comme du texte en ligne. Commençons par voir comment le texte s’affiche. Créons une ligne de test et enveloppons-la dans un span.
display: inline
La balise span s’affiche en ligne comme le texte doit s’afficher (bien sûr, à l’exception des idéogrammes japonais qui s’affichent en colonne). En même temps, la balise span n’a ni hauteur ni largeur, il est impossible de définir ces paramètres à une balise avec display: inline, car le texte est mesuré selon d’autres caractéristiques : taille de la police, famille de la police, couleur, espace entre les lettres, les lignes, les mots, indentation au début de la ligne. Donc, si vous souhaitez définir une taille, une hauteur, une largeur ou des marges à une balise, vous devez utiliser la valeur suivante de la propriété display.
display: block
La valeur block est utilisée par défaut pour la balise div, cette valeur permet de définir la largeur, la hauteur, ainsi que les marges autour du bloc. Ainsi, nous pouvons définir une zone sur le site et y insérer du texte, une image ou un autre bloc. Nous pouvons même définir display: block à une balise span, dans ce cas (il vaut mieux utiliser un span avec une classe, par exemple <span class="block">text</span>) cette balise aura une largeur et une hauteur et commencera à se comporter comme un bloc.
Une autre particularité de la valeur block est que le bloc s’étend sur toute la largeur possible, c’est-à-dire que la largeur par défaut est de 100%. Mais il n’est pas possible de définir height: 100% au bloc, c’est-à-dire une hauteur de 100%. En effet, le bloc occupe en hauteur autant de place que nécessaire, le reste peut être défini en pixels, par exemple 800px, mais il n’est pas possible d’étirer le bloc sur toute la hauteur de l’écran. Nous continuerons la discussion à ce sujet dans de prochains articles.
display: inline-block
Il arrive que nous ayons besoin que les images s’affichent comme des blocs, c’est-à-dire qu’elles aient une largeur, une hauteur et des marges, mais sans s’étendre à 100% de la largeur, elles doivent simplement s’aligner les unes à la suite des autres. Pour cela, on peut utiliser inline-block. Cette valeur combine l’affichage du texte et du bloc. On peut aussi appliquer display-block aux blocs classiques.
display: table
La valeur table est utilisée par défaut pour les tableaux. Contrairement aux blocs, un tableau peut s’étendre en hauteur à 100%, mais nous utiliserons quand même à l’avenir la mise en page en blocs plutôt qu’en tableaux, car les tableaux doivent être utilisés uniquement pour des données tabulaires et non pour la mise en page.
display: list-item
Lorsqu’on utilise la valeur list-item (c’est la valeur par défaut pour la balise <li>), un marqueur est ajouté (par défaut un cercle noir).
display: none
Si vous appliquez cette valeur à une classe, une balise ou un id, alors... il ne s’affichera plus sur le site ! Soyez prudent avec cela, car vous pouvez enlever quelque chose d’important et il sera difficile ensuite de comprendre pourquoi l’élément n’est plus visible. Mais lorsque le client demande à retirer quelque chose du site (par exemple une icône RSS), vous pouvez faire ceci :
.rss{
display: none;
}
Bien sûr, il est plus correct de retirer l’élément du template pour qu’il ne soit pas généré. Mais s’il est généré, on peut le masquer facilement via le CSS sans se prendre la tête.