Annullare l'espansione degli elementi in CSS
Di solito, l'espansione descritta nelle lezioni precedenti è dannosa
e vorresti liberartene. Per
farlo, in CSS esiste la proprietà box-sizing.
Se le assegni il valore border-box,
allora né il padding, né il bordo
espanderanno il blocco:
<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; /* impostiamo i padding */
border: 10px solid green; /* impostiamo il bordo */
box-sizing: border-box; /* disattiviamo l'espansione */
}
:
Prova in autonomia la proprietà descritta
box-sizing.
