Largeur et hauteur

Par défaut une boîte est dimensionnée automatiquement par la navigateur : elle a pour largeur la largeur de son conteneur (élément parent ou fenêtre du navigateur) et pour hauteur l'espace minimum pour que leur contenu y tienne, ni plus, ni moins.
Il est toutefois possible de spécifier des autres dimensions et de définir des tailles minimum ou maximum.

Les boîtes de type en ligne (display: inline;) ne peuvent pas être dimensionnées.

Largeur et hauteur

Les propriétés width et height définissent la largeur et la hauteur d'une boîte.

Suivant la valeur de la propriété box-sizing, largeur et hauteur ne sont pas calculées de la même façon.

Par défaut (`box-sizing: content-box;`), les largeurs et hauteurs sont celles de de la zone d'affichage de la boîte
largeur et hauteur du modèle par défaut	`margin-left + border-left + padding-left + width + padding-right + border-right + margin-right ---------------- largeur totale`	`margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom ---------------- hauteur totale`
Si la valeur de la propriété box-sizing est `border-box`, les largeurs et hauteurs sont celles de de la zone d'affichage de la boîte plus les marges internes plus l'épaisseur des bordures.
largeur et hauteur du modèle avec bords	`margin-left + width + margin-right ---------------- largeur totale`	`margin-top + height + margin-bottom ---------------- hauteur totale`

la propriété box-sizing n'est pas connue des navigateurs d'anciennes générations et il est donc déconseillé de l'utiliser si vous ciblez un maximum d'utilisateurs.
Dans la suite du tutoriel, nous considérerons que nous travaillons avec le modèle par défaut.

Tester les dimensions

L'unité de taille pour définir la hauteur ou la largeur est à choisir en fonction du dispositif d'affichage. Par exemple il ne faut pas utiliser des centimètres pour afficher sur un écran pour lequel on privilégiera le pixel CSS (px), le cadratin (em), le pourcentage (%) ou la référence à la racine du document (rem).
Les unités utilisées peuvent être différentes pour la hauteur et pour la largeur d'un élément.

Si on utilise l'unité em pour définir la hauteur ou la largeur, la valeur sera basée sur la taille de la police à l'intérieur de la boîte.

Si on utilise l'unité % pour définir la hauteur ou la largeur, le pourcentage sera calculé par rapport à l'élément parent de la boîte. Si l'élément a pour parent body le pourcentage sera calculé par rapport à la fenêtre du navigateur. Un redimensionnement de la fenêtre entraînera automatiquement un redimensionnement de la boîte. Une telle mise en page est appelée fluide (fluid layout) ou élastique (elastic layout).

Exemple : mise en page fluide

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title>Les CSS</title>
		<link href="styles.css" rel="stylesheet">
	</head>
	<body>
		<div id="page">
			<header>Véhicules à vendre</header>
			<nav>
				<a href="#">Y-wing</a>
				<a href="#">N-1 Naboo</a>
				<a href="#">Chasseurs Sith</a>
				<a href="#">B-wing</a>
				<a href="#">X-wing T-65</a>
				<a href="#">A-wing RZ-1</a>
			</nav>
			<aside>
				<p>Les CSS sont l'arme secrète de la Force !
				<img src="../exemples/img/yoda.jpg"> 
				Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p>			
			</aside>			
			<section>
				<p>Notre société achète et vend des "vaisseaux de collection" (mais en bon état de <span class="barre">tir</span> marche).<br>Le siège de la société est en Plein Milieu de la Galaxie. Des agences sont implantées sur presque tous les planètes (Yavin IV, Tatooine, Naboo, Dagobah, Hoth, ...)<br>Cette dispersion géographique nous permet de vous présenter une gamme très étendues, et de trouver les "vaisseaux de collection" désirés dans les meilleurs délais (et <span class="barre">qui tirent bien</span> en bon état de marche).</p>
				<p>Nous voulons que notre site Web attire les acheteurs et les vendeurs du monde entier qui pourront non seulement connaître les derniers modèles mis en vente, mais également prendre des contacts pour faire examiner et certifier leurs vaisseaux avec toutes les garanties de sérieux et de confidentialité.</p>
			</section>

</div>
	</body>
</html>

Fichier CSS : styles.css

body { background: #111; color: white; }
#page {
	width: 80%;		/* 80% de la fenêtre du navigateur */
	margin: 0 auto;	/* centrer */
}
header { 
	font: bold 1.5em Verdana Geneva sans-serif;
	background: url(../exemples/img/bandeau.jpg) no-repeat center #000;
	margin-bottom: 1em;
	height: 30px;
	padding-top: 70px;	/* positionner le texte */
	text-align: center;
}
nav { 
	float: left;
	width: 110px; 
}
section { 
	padding-left: 120px;	/* laisse de la place pour nav */
	padding-right: 100px;	/* laisse de la place pour aside*/
}
aside {
	float: right;
	width: 90px;
	background: darkslategrey;
	padding: 0 5px;
	font-size: 0.85em;
}
img {
	width: 100%;	/* occupe la largeur de son parent */
	height: auto;	/* garder les proportions de l'image */
}
a { 
	display: block;	/*force affichage type bloc */
	padding: 2px 0 2px 4px;
	margin: 0 0 2px 0;
	text-decoration: none;	/* enlève le soulignement */
	color: white;
}	
a:nth-child(2n) { background: firebrick; }
a:nth-child(2n + 1) { background: crimson; }
.barre { text-decoration: line-through; }

Redimensionnez la fenêtre de test pour voir le changement de largeur de la mise en page.

Dimensions minimum et maximum

Il est possible de définir des dimensions minimum et maximum pour la largeur et la hauteur d'une boîte avec les propriétés min-width, max-width, min-height et max-height

Si on reprend l'exemple précédent, on s'aperçoit que si la fenêtre du navigateur fait moins de 600 pixels de large, l'image de fond du bandeau n'est pas affichée entièrement. Si à l'inverse la largeur de la fenêtre est très grande, le texte principale devient difficile à lire car les lignes sont trop grandes.
Pour éviter ces problèmes, on peut utiliser min-width et max-width sur l'élément div identifié par #page.

Exemple : mise en page fluide limitée

</div>
	</body>
</html>

Fichier CSS : styles.css

body { background: #111; color: white; }
#page {
	width: 80%;		/* 80% de la fenêtre du navigateur */
	margin: 0 auto;	/* centrer */
	min-width: 600px;	/* largeur de l'image du bandeau */
	max-width: 800px;	/* largeur maxi d'affichage */
}
header { 
	font: bold 1.5em Verdana Geneva sans-serif;
	background: url(../exemples/img/bandeau.jpg) no-repeat center #000;
	margin-bottom: 1em;
	height: 30px;
	padding-top: 70px;	/* positionner le texte */
	text-align: center;
}
nav { 
	float: left;
	width: 110px; 
}
section { 
	padding-left: 120px;	/* laisse de la place pour nav */
	padding-right: 100px;	/* laisse de la place pour aside*/
}
aside {
	float: right;
	width: 90px;
	background: darkslategrey;
	padding: 0 5px;
	font-size: 0.85em;
}
img {
	width: 100%;	/* occupe la largeur de son parent */
	height: auto;	/* garder les proportions de l'image */
}
a { 
	display: block;	/*force affichage type bloc */
	padding: 2px 0 2px 4px;
	margin: 0 0 2px 0;
	text-decoration: none;	/* enlève le soulignement */
	color: white;
}	
a:nth-child(2n) { background: firebrick; }
a:nth-child(2n + 1) { background: crimson; }
.barre { text-decoration: line-through; }

Redimensionnez la fenêtre de test pour voir le changement de largeur de la mise en page et les valeurs mini ou maxi qui stoppent la réduction ou l'agrandissement.