Les types d'éléments et le box model

Les types d'éléments.

Il est très important de distinguer et de comprendre le comportement des différents types d'éléments. Deux types en particulier sont courants et méritent quelques explications : block et inline.

Les éléments de type block.

Les éléments de type block sont par exemple les paragraphes p, tous les titres de h1 à h6, les div, etc. Ils sont caractérisés par :

divUn élément de type block/div

Les éléments de type inline.

Les éléments de type inline sont par exemple les liens hypertexte a, les zones de saisie input, les balises span, etc. Cela surprend souvent mais les images img sont également du type inline. Ces éléments ont tous en commun les caractéristiques suivantes :

Voici un spanélément inine/span inséré dans un texte.

Les autres types d'éléments.

D'autres types d'éléments existent mais sont plus spécialisés : ils ont en général un rôle précis et ne concernent que quelques balises html. Citons par exemple table, table-row, list-item, etc. A cause de leur spécificité, il n'est pas utile d'approfondir leur comportement dans cette introduction.

CSS3 a introduit deux nouveau types d'éléments qui, eux, sont très intéressants : flex et grid. Un chapitre spécial leur est réservé dans la suite de ce tutoriel.

Notez que la propriété CSS display peut changer le type de n'importe quel élément.

Le box-model.

Ce terme que l'on trouve dans tous les tutoriels sur CSS n'est pas toujours expliqué. En fait il s'agit simplement de définir comment sont calculées les dimensions des éléments, comment sont positionnées les marges, etc. Le petit dessin ci-dessous est sans plus clair que toutes les explications.

Box model du CSS

Mais du coup qu'appelle-t-on largeur ou hauteur de l'élément ? Est-ce que les dimensions de l'élément incluent les marges, la bordure... ? La réponse peut surprendre : par défaut les dimensions de l'élément sont les dimensions de son contenu. Pour info, les dimensions sont définies par les propriétés width pour la largeur, et height pour la hauteur.

Ce n'est pas très instinctif : on s'attendait à ce que les dimensions de l'élément soient calculées par rapport à la bordure de cet élément. Mais un propriété permet de changer ce mode de fonctionnement : box-sizing. On peut si on le souhaite décider que les dimensions de l'élément sont définies par rapport à sa bordure.

Le centrage horizontal.

Le centrage est une opération importante en mise en forme. CSS distingue plusieurs sortes de centrage : le centrage des blocs dans leur élément parent ; et le centrage du contenu d'un bloc.

Le centrage du bloc dans son élément parent (souvent la page) se fait en appliquant la valeur auto aux marges gauche et droite. Le contenu du bloc quant à lui peut être centré avec la propriété text-align.

Ce bloc n'est pas centré.
Sa largeur a été réduite pour les besoins de la démonstration.
Ce bloc n'est pas centré
mais son contenu est centré.
text-align:center;
Ce bloc est centré dans son parent
mais son contenu n'est pas centré.
margin-right:auto;
margin-left:auto;
Ce bloc est centré
Son contenu également.
margin-right:auto;
margin-left:auto;
text-align:center;

Le centrage vertical.

C'est beaucoup moins facile. Pour simplifier, nous allons dire que le centrage vertical ne fonctionne bien que dans les cellules de tableau, ou pour ajuster la position d'un élément inline sur sa ligne. Le centrage vertical est géré par la propriété CSS vertical-align.

Mais ici aussi les éléments flexibles apportent beaucoup de souplesse. Il faut vraiment que vous alliez lire le tutoriel sur les Les flex-box.