Bloc, inline, table-cell et les autres propriétés display

 

Les menus surgissants

La propriété display est sans doute la plus complexe. Elle est depuis près d'une décennie déjà largement employée pour faire disparaitre (display:none) les menus surgissants (display:block) .

Révolutionner la pagination

Tous les navigateurs courants ont fini par adopter (dans leurs dernières versions) sa valeur table-cell permettant une pagination en tableau qui devrait révolutionner la pagination globale de la page.

Entrons dans le vif du Sujet

ne s'hérite pas CSS2.1 iemzchromeoperasafari
I Deux rendus visuels de base : bloc et en-ligne

Les spécifications CSS  regroupent les éléments selon les deux grands modèles de mise en forme visuels : block et inline.

Les balises HTML ont, par défaut, une des propriétés de rendu CSS. Cette valeur par défaut partage les balises en 2 groupes : celles de rendu "bloc" (block) et celle de rendu CSS "en-ligne" (inline).

Exemple
Exemples de balise à rendu inline :
SPAN, EM, STRONG, IMG, BR, INPUT, etc. (cf liste HTML4 inline)
Exemples de balise à rendu bloc :
DIV, P, H1...H6, UL, OL, TABLE, PRE, etc. (cf liste HTML4 bloc)

En règle générale :

Exemple

On pourra écrire :

<div>
   <p>Lorem</p>
   <p>ipsum</p>
</div>

La balise <div> englobe les deux paragraphes .

En revanche, l'imbrication suivante n'est pas conforme :

<span>
  <p>Lorem</p>
  <p>ipsum</p>
</span>

car la balise <span> (de type inline) n'est pas autorisée à contenir des éléments de de type bloc comme <p>.

Rendu CSS : l'aspect par défaut des éléments

block

Les éléments de rendu CSS block se placent l'un en dessous de l'autre par défaut . Un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur et peut être dimensionné à l'aide des propriétés telles que width,height, min-width, ou min-height,...

Exemple

Ceci est un paragraphe <p>, c'est un bloc. Sans dimension, il occupe toute la largeur disponible. Sans dimension, sa hauteur s'ajuste à son contenu

Ceci est un paragraphe <div>, c'est un bloc. Elle se place en dessous du bloc précédent. Un bloc peut être dimensionnée (contrairement un élément inline), ici height:7em;
  • ceci est une liste <ul> , c'est aussi un bloc
  • sans dimension, elle occupe aussi toute la largeur

inline

Les éléments  inline se placent toujours l'un à côté de l'autre dans le flux courant. Par défaut, on ne peut pas leurs donner de dimensions (hauteur, largeur) : leur taille s'ajustera au le texte qu'ils contiennent. Certaines propriétés de marges peuvent être appliquées aux éléments, comme les marges latérales.

Exemple
<strong> Lorem ipsum dolor</strong> <em>sit amet..</em> <strong> Donec a velit lectus, sit amet</strong> <em> aliquam tellus. Aenean libero enim, <em> ullamcorper vitae rhoncus at, <strong> volutpat a lacus.</strong>

 

Ce texte va s'afficher sur une seule ligne (aucun retour à la ligne) car les éléments qui le composent sont de rendu CSS "en-ligne".

ne s'hérite pas CSS2.1 ie8+mzchromeoperasafari
II inline-block

Les éléments inline-block se placent les uns à la suite des autres comme les "inline", mais peuvent être en plus dimensionnés (la balise <input> est inline-block par défaut).

Exemple

paragraphe modifié en display:in-line-block; de largeur 25em
et de hauteur 5em

  • liste modifiée
  • en display:inline-block; de largeur 20em

ne s'hérite pas CSS1 iemzchromeoperasafari
III none

Permet de masquer un élément à l'affichage : aucune boîte n'est générée dans la structure de formatage, il n'y a pas d'influence sur la mise en forme du document.

Exemple
Disparition, en passant la souris sur cette phrase, display:none fleur de cerisier

ne s'hérite pas CSS1 ie8+mzchromeoperasafari
IV table, table-row, table-cell

Les éléments de display tabletable-rowtable-cell adopte exactement le même rendu visuel qu'un tableau <table> avec ses lignes <tr> et ses cellules <td>. Les cellules s'alignent horizontalement et verticalement suivant le quadrillage attendu. On y pourra aussi centrer les contenus verticalement (vertical-align:central).

"table","table-cell", "table-row", ne sont pas supporté par IE7 et ses prédecesseur. IE8 requière un !DOCTYPE. IE9 les supporte (!?!).

Exemple

bobo

toto

tutu

VI Feuille de style par défaut pour HTML 4, marges par défaut

Le W3C définit une  feuille de style par défaut proposée par la norme CSS2.1 par le W3C.

Par défaut, la plupart des éléments block (en fait, tous sauf la balise neutre <div>) possèdent des marges internes et externes non nulles. Ces marges par défaut, interprétées différemment suivant les navigateurs, nécessitent parfois d'être annulées car elles peuvent produire de grosses divergences de rendu.

Dans de nombreux cas, il est conseillé de faire un reset général des marges

Référence CSS

Ressources

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Voir le deuxième exemple de menu

Pourriez-vous transformer la liste non-ordonnée

ci-dessous à l'aide de display:inline-block pour en faire la présentation ci-dessus ?

Voir le corrigé