Compito

Analisi delle differenze pratiche tra i valori content-box e border-box per la proprietà box-sizing. Il compito è il seguente:

• Applicare il valore content-box alla proprietà box-sizing per l'elemento con l'id content-box.
• Applicare il valore border-box alla proprietà box-sizing per l'elemento con l'id border-box.

• box-sizing: content-box: Larghezza e altezza escludono padding e bordo.
• box-sizing: border-box: Larghezza e altezza includono padding e bordo.

Spiegazione

In questo esempio sono presenti due elementi div, ciascuno con un valore diverso per la proprietà box-sizing:

• Il primo div presenta un bordo rosso e utilizza il valore predefinito content-box per la proprietà box-sizing. Anche impostando width e height a 200px, il padding e il border aggiungono spazio extra, portando le dimensioni effettive a superare i 200px in entrambe le direzioni;
• Al contrario, il secondo div mostra un bordo blu e imposta border-box come valore della proprietà box-sizing. In questo caso, width e height rimangono a 200px, ma il padding e il border sono inclusi nelle dimensioni del box.

Si possono osservare le dimensioni differenti delle due box: la prima risulta più grande a causa dello spazio aggiuntivo di padding e border, mentre la seconda mantiene una dimensione costante di 200px, inclusi padding e border.