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;
}
:
