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
- Ils sont précédés et suivis par un retour à la ligne.
- Ils occupent par défaut toute la largeur disponible.
Les éléments de type inline.
Les éléments de type inline sont par exemple les liens hypertexte inline. Ces éléments ont tous en commun les caractéristiques suivantes :
- Ils ne provoquent pas de retour à la ligne, d'où leur nom.
- Leur largeur est définie par leur contenu.
Voici un
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.
- On trouve tout d'abord les marges, à l'extérieur de la bordure et calculées par rapport à l'élément parent.
- Ensuite vient la bordure, dont l'épaisseur n'est pas à négliger même si ce n'est que 1 pixel.
- A l'intérieur de la bordure et autour du contenu, viennent les marges intérieures (padding en anglais).
- Enfin le contenu proprement dit : du texte, une image ou n'importe quel autre élément.
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.
Sa largeur a été réduite pour les besoins de la démonstration.
mais son contenu est centré.
text-align:center;mais son contenu n'est pas centré.
margin-right:auto;
margin-left:auto;
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 flex-box.
Commentaires
Enregistrer un commentaire