Démonstration : éléments block et inline

Cette page montre :

1. Éléments block par défaut

Les éléments suivants sont block par défaut. Ils prennent toute la largeur disponible et commencent sur une nouvelle ligne :

DIV 1 (block)
DIV 2 (block)

P (paragraphe block)

H3 (titre block)

2. Éléments inline par défaut

Les éléments suivants sont inline par défaut. Ils occupent seulement la largeur de leur contenu et restent sur la même ligne :

Texte normal avec SPAN (inline) et un lien <a> (inline) et un STRONG (inline).

3. Forcer des éléments block en inline (display: inline)

Ci-dessous, ce sont des <div> (block par défaut) mais auxquels on applique display: inline. Ils se placent côte à côte :

DIV A (display: inline)
DIV B (display: inline)
DIV C (display: inline)

4. Forcer des éléments inline en block (display: block)

Ci-dessous, ce sont des <span> (inline par défaut) mais avec display: block. Ils prennent toute la largeur et passent chacun à la ligne :

SPAN 1 (display: block) SPAN 2 (display: block) SPAN 3 (display: block)