Un article de WikiTuto.

Apprendre les CSS CSS Généralités Feuilles de style : appliquer un style Application d'un style à un code HTML Association avec un média particulier Association d'un style à une balise DIV et SPAN Notion de boîte Feuilles de style : liste des éléments Unités de mesure Propriétés de police Mise en forme du texte Mise en forme de liste Couleurs et arrière-plans Retraits extérieurs et intérieurs Cadres Positionnement absolu des éléments Exemple de réalisation de feuille de style Que doit contenir le site deux feuilles de style feuille de style pour l'écran La feuille de style pour l'impression Utilitaires CSS Positionnement et affichage Positionnement et affichage explications propriété clear Exemple de positionnement flottant Affichage Tableaux sans tableau Bouton CSS sans programmation Bouton plat Bouton en relief Les bugs d'Internet Explorer modifier Tdm CSS

Explication

La propriété display permet en fonction de la valeur qu'elle prend d'afficher de différentes manière une boîte (balise), un tableau, une liste, etc...

Valeurs possibles :

• none : L'élément est masqué ;

• block : transforme la boîte en type block;;

• inline : transforme un type block en type inline.

Par défaut les boîtes (ou balises si vous préférez) sont positionnées les unes en dessous des autres (pour celle étant de type block).

Ainsi ce code :

<div>Un</div>
 <div>Deux</div>
 <div>Trois</div>
     

produira cet affichage :

---

On peut changer la donne en modifiant le style grâce à la propriété display et une valeur inline.

Ainsi ce code :

<div style="display:inline">Un</div>
 <div style="display:inline">Deux</div>
 <div>Trois</div>
     

produira cet affichage :

---

Il existe aussi des boîtes de type inline. C'est donc l'inverse qui se produit, et elles sont placées à la suite des autres. Si vous souhaitez les afficher verticalement (les unes en dessous des autres), il faut utiliser la propriété display et une valeur block.

Exemple : css-demo-03.html

<div>Un</div>
 <div>Deux</div>
 <div>Trois</div>
          
 <hr>
          
 <div style="display:inline">Un</div>
 <div style="display:inline">Deux</div>
 <div>Trois</div>
          
 <hr>
          
 <span>Un</span>
 <span>Deux</span>
 <span>Trois</span>
          
 <hr>
          
 <span style="display:block">Un</span>
 <span style="display:block">Deux</span>
 <span>Trois</span>

Ce qui donne ceci :

Source

Dominique Gonzalez

Voir aussi

1. Positionnement et affichage explications
2. propriété clear
3. Exemple de positionnement flottant
4. Affichage