Travailler avec les marges intérieures padding en CSS

Supposons que nous ayons défini une largeur de 100px pour un élément. En CSS, cela ne signifie pas du tout que l'élément aura réellement une largeur de 100px. Le fait est que l'ajout d'un padding étend l'élément et il devient plus grand que ce qui est spécifié dans la propriété width.

Regardons un exemple. Créons deux blocs auxquels nous attribuerons une largeur de 100 pixels. En même temps, attribuons un padding au deuxième bloc, mais pas au premier. En conséquence, le deuxième bloc sera plus grand de la taille de la marge intérieure :

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	background: #f1f1f1;
	margin-bottom: 20px;
}

#elem2 {
	padding: 25px; /* définir les marges intérieures */
	width: 100px;
	height: 100px;
	background: #f1f1f1;
}