Médiaforma

Display

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

La propriété CSS display permet de changer le type (inline ou block) d’une balise, d’une classe ou d’un identifiant. Dans une rubrique précédente, vous avez appris que les balises <span> sont de type inline et les balises <div> de type block. Je vous propose d’inverser le type de ces deux balises en utilisant la propriété CSS display.

Examinons le code suivant :

Le corps du document définit deux balises <span>, lignes 13 et 14, et deux balises <div>, lignes 18 et 19. Normalement, les balises <span> devraient se trouver sur la même ligne et les balises <div> sur deux lignes consécutives.

Il est temps d’utiliser la propriété display pour modifier ce comportement par défaut.

La ligne 5 affecte un style block aux balises <span> dans leur ensemble. En remplaçant le mot span par une classe ou un identifiant, il aurait été possible de limiter cette conversion à certaines balises <span> seulement.

Quant à la ligne 6, elle affecte un style inline aux balises <div> dans leur ensemble. Ici également, en remplaçant le mot div par une classe ou un identifiant, il aurait été possible de limiter cette conversion à certaines balises <div> seulement.

Comme vous pouvez le constater en exécutant ce code :

–          les balises <span> sont maintenant de type block,

–          les balises <div> sont maintenant de type inline.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply