Le dimensionnement des éléments

1. Les marges

Les problèmes de dimensionnement et de positionnement constituent probablement la partie la plus complexe du CSS.

Le dimensionnement des éléments de niveau bloc

En CSS, le dimensionnement des éléments de niveau bloc est basé sur le « modèle de la boite » qui fait intervenir quatre zones. Ce sont, de l'intérieur vers l'extérieur,

  • le contenu proprement-dit de l'élément : texte, images, etc., qui forme une région rectangulaire ;
  • la marge interne (en anglais : padding). C'est une zone intermédiaire entre le contenu et le cadre, qui joue un peu un rôle de passe-partout ;
  • le cadre, aussi appelé bordure (en anglais : border); et finalement
  • la marge externe (en anglais : margin), une zone tampon qui empèche que le contenu extérieur à l'élément s'approche trop de la bordure.

Ces quatre zones sont illustées dans la figure suivante :

ml

mr

marge extérieure (margin)        mt

pl

pr

marge intérieure (padding)    pt

contenu : wc×hc

pb

mb

Il est à noter qu'une (ou plusieurs) de ces zones peut (peuvent) être absente(s).

Largeurs des marges et du cadre

Marge extérieure Bordure Marge intérieure
margin-top mt border-top-width bt padding-top pt
margin-right mr border-right-width br padding-right pr
margin-bodtom mb border-bottom-width bb padding-bottom pb
margin-left ml border-left-width bl padding-left pl
Propriété Valeurs possibles
margin-xxx longueur | pourcentage | auto | inherit
border-xxx-width thin | medium | thick | longueur | inherit
padding-xxx longueur | pourcentage | inherit

Les deux marges, tout comme la bordure, peuvent chacune être décomposées en quatre parties : le haut (top), le bas (bottom), la gauche (left) et la droite (right). Le haut du tableau à droite donne le nom des propriétés utilisées pour dimensionner chacune de ces parties.

Cette partie du tableau contient aussi les notations que nous utiliserons pour désigner ces différentes largeurs.

Le bas du tableau (où xxx peut être remplacé par top, bottom, etc.) indique quelles sont les valeurs qu'on peut assigner à ces diverses propriétés.

Marges intérieures

Le dimensionnement des marges inté­rieures d'un élément se fait en utilisant

les propriétés padding-top, etc. et en spécifiant comme valeur une longueur en pixels ou en cadratins ou encore en pourcentage de la largeur de l'élément parent ; on peut aussi hériter la largeur des marges intérieures de cet élément parent en utilisant la valeur inherit. La valeur par défaut est 0.

Déclarations combinées

Plutôt que d'utiliser le code

padding-top: 10px;
padding-left: 20px;
padding-right: 30px;
padding-bottom: 40px;

on peut utiliser la déclaration combinée

padding: 10px 30px 40px 20px;

La déclaration se fait en partant du haut et en tournant autour de l'élément dans le sens horaire : top puis right, ensuite bottom et enfin left.

Si plusieurs valeurs sont égales, il est possibe de faire une déclaration combinée encore plus compactes. Par exemple,

padding: 10px;

signifie que les quatre valeurs sont égales à 10 pixels et

padding: 10px 20px;

signifie que les valeurs pour top/bottom sont 10 pixels et celles pour right/left sont 20 pixels. S'il y a trois valeurs, elles sont dans l'ordre : top, right/left et bottom.

Marges extérieures

Le dimensionnement des marges extérieures se fait de manière analogue en utilisant les propriétés margin-top, etc. ou encore des propriétés combinées similaires à celle pour les marges intérieures.

Une différence majeure est qu'on peut laisser le navigateur décider de la largeur en choisissant la valeur auto (qui peut aussi être utilisée dans les déclarations com­bi­nées). Cette valeur auto peut aussi être utilisée pour centrer un élement de niveau bloc dans son élé­ment parent (voir plus loin).

Tout comme pour les marges intérieures, la valeur par défaut pour les marges extérieures est 0.

Le cadre

Comme on l'a vu, l'épaisseur des quatre portions du cadre se fair en donnant aux propriétés border-top-width etc. une valeur spécifiée de la manière habituelle, en pixels ou en cadratins. On a aussi vu que des déclarations combinées sont possibles et qu'on peut choisir les valeurs prédéfinies thin (mince), medium (moyen, le défaut) ou thick (épais).

Il est possible de ne pas avoir de cadre ; c'est en fait le défaut. Si nécessaire, cela peut être obtenu en utilisant la déclaration « border-style: none; ».

Accueil