7. Les boites CSS et leur positionnement

7.2 Les bords, les cadres et le couleur

Attributs	Valeurs	se charge de	exemple
margin	pt, px, cm, %	4 marges	body {margin:1cm;}
margin-top		marge en haut	p {margin-top:10px;}
margin-bottom		marge en bas	h3 {margin-bottom:3pt;}
margin-left		marge à gauche	img {margin-left:50px;}
margin-right		marge à droite	p.citation {margin-right:10pt;}
border	pt,px, cm, %	largeur du cadre	p {border:5px;}
border-top			h1 {border-top:0.2cm;}
etc ...
border-style		style de cadre
	solid	ligne simple	p {border-style:solid;}
	double	ligne double	h1 {border-style:double;}
padding	pt,px,cm,%,etc	marge intérieures	p {padding: 5px;}
color	valeur hexa /nom	couleur d'un élément	#menu {color:#000000;} body {color:blue;}
background	aussi	couleur de l'arrière-plan	h1, h2 {background:silver;}

Exemple:

#content {

border-right:	2px dotted black;

border-bottom:	2px dotted black;

color: #000;

background-color:	#ffffcc;

padding: 5px 5px 5px 5px;		    /* haut, droite, bas, gauche */

margin:	5px 15px 5px 5px;

H1 {

  /* 1 cm en haut et en bas, 2cm sur les côtés */

  margin: 1cm 2cm;

  /* 3em en haut, 20% sur les côtés, et 2em en bas */

  padding: 3em 20% 2em;

http://tecfa.unige.ch/guides/css/ex/boxing0.html
la boite pour le "body" a des lignes pointillés
la boite pour un <p> a une petite marge, un bord solide, et une couleur en arrière-plan
une partie de ce meme paragraphe est mis dans une boite avec un "span"

<body style="border-style:dotted">

<h1>Boites</h1>

<p>The dashed box is for the "body", the big thick box is for a "p" tag, and the thin box is used within a "span" tag. (View the source).</p>

<p style="background-color:#d0d0d0;border-style:solid;border-width:4px;

         padding:1em;margin:0.1cm;
">

   Tout est une boite - DKS nov 2003

   <span
 style="background-color:#d0d0d0;border-style:solid;border-width:1px;

               padding:1pt;margin:1pt;width:50%;position:relative
">

    <a href="http://validator.w3.org/check/referer">XHTML validation</a> -

   <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS validation<a>

   </span>

  </p>

<p>Voir <a href="boxing1.html">boxing1.html</a>  pour plus ... </p>

</body>

Par défaut les éléments d'une page HTML sont affichés séquentiellement un après l'autre
Mais on peut les positionner selon des coordonnées absolues ou relatives n'importe où sur une page (voir les exemples qui suivent)

#content	{	/*  les coordonnees selon l'horloge: 12, 3, 6, 9 */

	float:	left;

	width:	80%;

	color: #000;

	background-color:	#ffffcc;

	padding: 5px 5px 5px 5px;

	margin:	5px 5px 5px 5px;

#menu	{ /* qui sera mis à droite */

	position: absolute;

	right: 0;

	width: 17%;

	font:	10px/14px verdana, sans-serif;

	color:	black;

	margin:	5px 5px 5px 5px;

	background-color: #ffffff;