Le langage CSS/Le modèle de boîte

Modèle de boîte d'un élément

modifier

Chaque élément est modélisable sous forme de boîtes imbriquées.

margin

border

padding

Zone de contenu (texte, image, ...).

margin
Espace entre les bordures des éléments.
border
Bordure autour de l'élément, d'épaisseur variable.
padding
Espace entre la bordure et le contenu de l'élément.

Chacune de ces propriétés peuvent se décliner dans les 4 directions. Voir le chapitre sur les bordures, marges et espacements pour plus de détails.

Ombrage des boites

modifier

La propriété box-shadow existe depuis CSS3. Elle crée un effet d'ombrage qui suit le contour de la boite, avec quatre arguments possibles : abscisse, ordonnée, diffusion, couleur.

CSS3 WebKit Gecko
box-shadow -webkit-box-shadow -moz-box-shadow

Exemples

modifier

Cette boite affiche une ombre rectangulaire en bas à droite.

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
}



Cette boite affiche une ombre arrondie en bas à droite.

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



Cette boite affiche une ombre diffuse en rouge en haut à gauche.

div {
	border: 1px solid;
	box-shadow: -10px -10px 5px red;
	-webkit-box-shadow: -10px -10px 5px red;
	-moz-box-shadow: -10px -10px 5px red;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



Cette boite affiche une ombre diffuse en rouge, vert et bleu, en bas à droite.

div {
	border: 1px solid;
	box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-webkit-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-moz-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}


Taille des boites

modifier

La propriété box-sizing est apparue en CSS3[1] pour simplifier les couches.

W3C WebKit Gecko
box-sizing -webkit-box-sizing -moz-box-sizing

Elle prend un seul argument, parmi les valeurs suivantes :

  • content-box
    boites intérieures normales.
  • border-box
    boites intérieures autour de la bordure.
  • inherit
    comportement hérité du parent.

Exemple

modifier
div.bigbox {
	width: 40em;
	border: 1em solid red;
	min-height: 5em;
}

div.littlebox {
	width: 50%;
	border: 1em solid;
	box-sizing: border-box; /* cela définit les boites contre la bordure du conteneur */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	float: left;
}
<div class="bigbox">
	<div class="littlebox" style="border-color: green;">Boite de gauche.</div>
	<div class="littlebox" style="border-color: blue;">Boite de droite.</div>
</div>

Rendu :

Boite de gauche.
Boite de droite.

Les deux boites sont côte-à-côte au-dessus du texte.

Références

modifier
  1. http://www.w3.org/TR/css3-ui/#box-sizing