Chaque élément Html est contenu dans une boîte. Pour comprendre le comportement des boîtes, il faut savoir ce que désigne chaque dimension utilisée.

box-sizing: content-box;

Par défaut, les propriétés width et height désignent la largeur et la hauteur du contenu de la boîte. Pour avoir les dimensions de la boîte complète, il faut donc ajouter la valeur de :

• padding, dimensions entre le contenu et les bordures ;

• border-width, taille des bordures de la boîte ;
• margin, dimensions extérieures de la boîte.

Les propriétés précédentes peuvent être appliquées distinctement sur le haut (-top), le bas (-bottom), la gauche (-left) et la droite (-right).

box-sizing: border-box;

Il peut parfois être pratique de modifier la définition de width et height pour placer plus simplement les boîtes dans une page.

Pour cela, la propriété box-sizing peut prendre la valeur border-box. width et height ont alors les significations du schéma ci-contre.

Dimensions min et max

Il est aussi possible de définir des dimensions minimum et maximum pour la largeur et la hauteur d'une boîte grâce aux propriétés min-width, max-width, min-height et max-height (détails sur w3schools).

Dans ce bac à sable, les dimensions sont en pixels et les valeurs haut-bas-gauche-droite sont identiques. Ne pas hésiter à tester des valeurs négatives pour les marges intérieures et/ou extérieures.

Code Css :

p {                                 /* Mise en forme des paragraphes */
	width : 360px;                  /* Largeur du contenu */
	height : 100px;                 /* Hauteur du contenu */
	border : 0px none #000000;      /* Épaisseur - Apparence - Couleur */
	padding : 0px;                  /* Espace "intérieur" */
	margin : 0px;                   /* Espace "extérieur" */
	}			

Compléter le code Css ci-dessous pour que :

• L'article ait une marge extérieure de 50 pixels et une marge intérieure de 20 pixels.
• Le titre h3 ait un marge intérieure gauche de 10 pixels et une marge extérieure basse de 10 pixels.
• Les paragraphes aient une marge extérieure haute de 25 pixels.