Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Le modèle de boîte de CSS (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 :

  • Ils sont précédés et suivis par un retour à la ligne.
  • Ils occupent par défaut toute la largeur disponible.
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 :

  • Ils ne provoquent pas de retour à la ligne, d'où leur nom.
  • Leur largeur est définie par leur contenu.

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 tous les éléments ont un type par défaut, mais que la propriété CSS display peut changer le type de n'importe quel élément.

Le box-model CSS2.

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.

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.

box-sizing:content-box
box-sizing:content-box
Valeur par défaut
box-sizing:border-box
box-sizing:border-box

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. Css2 n'apporte pas vraiment de solution universelle pour aligner verticalement les éléments les uns par rapport aux autres, ou les aligner verticalement dans leur parent. 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.

Heureusement CSS3 apporte des solutions efficaces pour palier ce problème.

Les apports de CSS3.

Les nouveaux outils de mise en page apportés par CSS3 facilitent énormément les mises en page complexes et/ou responsives (qui s'adaptent aux différents terminaux (ordinateurs, tablettes, téléphones). Ces nouveaux outils sont les grilles, les flex-box, et, plus simplement, le multi-colonage.

La mise en oeuvre est la même dans tous les cas : définir le type d'un élément conteneur avec la propriété display. Les éléments enfants se positionnent alors en fonction de la nature du parent. Par exemple, si le conteneur parent est défini comme une grille, les éléments se disposent en tableau.

Prenons un exemple. Le code HTML ci-dessous est classiquement restitué comme on le voit sur l'exemple : les éléments intérieurs étant tous du type block, ils se disposent les uns en dessous des autres, en remplissant la largeur du parent.

div div1/div   div2/div   div3/div   /div
1
2
3

Maintenant, définissons l'élément parent (le conteneur) comme une grille. Il suffit pour ça d'un tout petit peu de CSS (en fait il en faudrait un peu plus pour définir également les colonnes de la grille mais cela nuirait à la clarté de ce tutoriel). En tous cas, le fait d'avoir déclarer le conteneur comme une grille provoque une disposition en tableau des éléments enfants du conteneur.

div style="display:grid"   div1/div div2/div div3/div /div
1
2
3

CSS fournit toutes les propriétés nécessaires pour disposer les cellules dans le conteneur, ou disposer les éléments dans leur cellule. C'est ce que nous allons voir maintenant.

Dispositions spécifiques à chacun des conteneurs.

En résumé, ces nouveaux conteneurs fournissent une série de plages (ou de cellules) dans lesquelles les éléments enfants viennent se positionner. Ces cellules sont disposées en fonction de la nature du conteneur : en tableau, côte à côte; etc.

Cellules définies par un conteneur grille.
Cellules définies par un conteneur flex.
Il s'agit plutôt de bandes
Cellules définies par un conteneur multi-colonnes.

En plus du positionnement de ses éléments enfants, chacun de ces conteneurs apporte des fonctionnalités particulières. Le flex-box par exemple peut répartir ses éléments enfants sur les lignes en fonction de leur dimension, et peut travailler horizontalement ou verticalement. On parle alors d'axe principal et d'axe secondaire, qui sont définis par la propriété . Le conteneur multi-colonnes répartit automatiquement le texte dans une ou plusieurs colonne. D'autre part, il permet de tracer facilement une ligne de séparation entre les colonnes. Et il y a bien d'autres particularités.

Positionnement des cellules (les propriétés ...-content.

Deux propriétés s'occupent du positionnement des cellules dans le conteneur. Ce sont justify-content pour le positionnement horizontal (ou suivant l'axe principal dans un flex-box), et align-content pour le positionnement vertical, ou suivant l'axe secondaire.

Pour la clarté de l'exposé, nous limiterons les exemples suivants aux conteneurs grilles.

Le positionnement suivant l'axe horizontal est assuré par la propriété justify-content. Et le positionnement suivant l'axe vertical par align-content. De façon générale, les propriétés dont le nom commencent par justify positionnement suivant l'axe horizontal ou l'axe principal, tandis que celles dont le nom commence par align positionnent suivant l'axe vertical ou secondaire. Ces propriétés s'appliquent sur le conteneur.

justify-content:start;
justify-content:end;

Les valeurs courantes pour ces propriétés sont start, end ou center, les deux première valeur étant contextuelles, c'est à dire qu'elles s'adaptent à la direction d'écriture. D'autre valeurs répartissent les cellules sur l'espace disponible : stretch, space-around, etc.

Positionnement des éléments dans les cellules (propriétés ...-items).

Non seulement les cellules peuvent être positionnées dans le conteneur, mais les éléments eux-mêmes peuvent être positionnés dans leur cellule. C'est le rôle des propriétés dont le nom se termine par items. Ces propriétés s'appliquent sur le conteneur : elles agissent donc sur tous les éléments enfants.

justify-items:center;
align-items:end;

Positionnement d'un élément particulier propriétés ...-self).

Les propriétés justify-self et align-self permettent de positionner un élément différemment des autres. Ces deux propriétés s'appliquent sur les éléments enfants et non pas sur le conteneur.

justify-items:center;
align-items:end;
justify-self:start;
align-self:start;

Pour aller plus loin.

Ce bref tutoriel est loin d'avoir présenté toutes les possibilités des conteneurs flex-box, grille ou autre. Nous nous sommes limités à une présentation des principes communs à ces conteneurs. Vous pouvez maintenant consulter :