Bases
Certains éléments possèdent par défaut un display:block;
, d’autres un display:inline;
. Tout ceci est modifiable en CSS.
See the Pen block by Benoît Wimart (@benoitwimart) on CodePen.
Pour une maquette simple, on peut faire des colonnes avec deux display:inline-block
.
See the Pen block, inline by Benoît Wimart (@benoitwimart) on CodePen.
à retenir
Les block
occupent toute la largeur de la page (width:100%
par défaut)
Les inline
n’acceptent pas la propriété width
, les inline-block
l’acceptent.
Les images sont de type inline
.
Les inline et inline-block sont réactifs aux espacements et retours à la ligne dans le code (les blocs ne se collent pas).
See the Pen ZUT by Benoît Wimart (@benoitwimart) on CodePen.