<HTML>
<HEAD>
<TITLE>demo style global </TITLE>
<STYLE TYPE="text/css">
P {
border-style: dashed;
width: 400px
/* border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red*/
}
</STYLE>
</HEAD>
<BODY>
<P>
On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche [ndt. margin-left], "ED" mis pour espacement droit [ndt. padding-right], "BH" mis pour bordure haute [ndt. border-top], etc.).
On appelle le périmètre de chacune des quatre aires (contenu, espacement, bordure et marge) un "bord", chaque boîte a donc quatre bords :
Le bord du contenu ou bord interne
Celui-ci entoure le rendu du contenu de l'élément.
Le bord de l'espacement
Celui-ci entoure la boîte de l'espacement. Si la valeur de l'espacement est 0, son bord est confondu avec celui du contenu. Le bord d'espacement d'une boîte définit le bord du bloc conteneur établi par la boîte ;
Le bord de la bordure
Celui-ci entoure la boîte de la bordure. Si la valeur de la bordure est 0, son bord est confondu avec celui de l'espacement.
Le bord de la marge ou bord externe
Celui-ci entoure la boîte de la marge. Si la valeur de la marge est 0, son bord est confondu avec celui de la bordure.
On peut se référer à chacun de ces bords selon qu'il se trouve du côté gauche, droite, haut ou bas.
Les dimensions de l'aire du contenu d'une boîte, celles-ci étant la largeur du contenu et la hauteur du contenu, dépendent de plusieurs facteurs : l'élément générant la boîte a-t-il une propriété 'width' ou bien 'height', la boîte contient-elle du texte ou d'autres boîtes, la boîte est-elle une table, etc. Les largeurs et hauteurs des boîtes sont traitées dans le chapitre concernant les détails du modèle de mise en forme visuel.
On obtient la largeur de la boîte en additionnant les marges, bordures et espacements gauches et droites avec le largeur du contenu. De même pour la hauteur de la boîte, en additionnant les marges, bordures et espacement hauts et bas avec la hauteur du contenu.
Le style qui est appliqué à l'arrière-plan du contenu et aux aires de l'espacement et de la marge, est spécifié au travers de la propriété 'background' de l'élément qui génère la boîte. L'arrière-plan des marges est toujours transparent.
</P>
</BODY>
</HTML>
Admin CliCours
