Lavorare con i margini interni padding in CSS
Supponiamo di aver impostato la larghezza di un elemento a
100px. In CSS ciò non significa affatto
che l'elemento avrà effettivamente una larghezza di
100px. Il fatto è che l'aggiunta del
padding espande l'elemento e diventa
più grande di quanto specificato nella proprietà width.
Vediamo un esempio. Creiamo due
blocchi a cui impostiamo una larghezza di 100
pixel. Allo stesso tempo, impostiamo il
padding per il secondo blocco, ma non per il primo. Di conseguenza
il secondo blocco sarà più grande della dimensione del margine interno:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* impostiamo i margini interni */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
