Annulation de l'expansion des éléments en CSS
En règle générale, l'expansion décrite dans les leçons précédentes est néfaste
et vous souhaiteriez vous en débarrasser. Pour
cela, le CSS dispose de la propriété box-sizing.
Si vous lui attribuez la valeur border-box,
alors ni le padding, ni la bordure ne
feront expansion du bloc :
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
width: 100px;
height: 100px;
background: #f1f1f1;
padding: 25px; /* définir les marges intérieures */
border: 10px solid green; /* définir la bordure */
box-sizing: border-box; /* supprimer l'expansion */
}
:
Testez par vous-même la propriété décrite
box-sizing.
