CSS
Il modello di scatola

Sintassi

• dimensionamento del riquadro: parametro ;

Parametri

Osservazioni

Qual è il modello di scatola?

I bordi

Il browser crea un rettangolo per ogni elemento nel documento HTML. Il modello di casella descrive come il riempimento, il bordo e il margine vengono aggiunti al contenuto per creare questo rettangolo.

Diagramma da CSS2.2 Bozza di lavoro

Il perimetro di ciascuna delle quattro aree è chiamato bordo . Ogni bordo definisce una scatola.

• Il rettangolo più interno è il riquadro dei contenuti . La larghezza e l'altezza di questo dipendono dal contenuto reso dell'elemento (testo, immagini e qualsiasi elemento figlio che possa avere).
• Il prossimo è il riquadro di riempimento , come definito dalla proprietà padding . Se non è definita alcuna larghezza di padding , il bordo di riempimento è uguale al bordo del contenuto.
• Quindi abbiamo la casella di confine , come definito dalla proprietà border . Se non c'è border larghezza definita, il limite del bordo è uguale al limite del cuscinetto.
• Il rettangolo più esterno è il margine , come definito dalla proprietà del margin . Se non v'è alcun margin larghezza definita, il bordo margine è uguale al limite del bordo.

Esempio

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

Questo CSS usa tutti gli elementi div per avere un bordo superiore, destro, inferiore e sinistro di 5px in larghezza; un margine superiore, destro, inferiore e sinistro di 50px ; e una imbottitura superiore, destra, inferiore e sinistra di 20 20px . Ignorando il contenuto, la nostra casella generata sarà simile a questa:

Screenshot del pannello Stili degli elementi di Google Chrome

• Poiché non c'è contenuto, l'area del contenuto (la casella blu al centro) non ha altezza o larghezza (0px per 0px).
• La casella di riempimento di default ha le stesse dimensioni del riquadro del contenuto, più la larghezza di 20px su tutti e quattro i bordi che stiamo definendo sopra con la proprietà padding (40px per 40px).
• La casella del bordo ha le stesse dimensioni del riquadro di riempimento, più la larghezza di 5 px che stiamo definendo sopra con la proprietà border (50px per 50px).
• Infine, la casella del margine ha le stesse dimensioni del riquadro del bordo, più la larghezza 50px che stiamo definendo sopra con la proprietà del margin (dando al nostro elemento una dimensione totale di 150 px per 150 px).

Ora diamo al nostro elemento un fratello con lo stesso stile. Il browser guarda il Box Model di entrambi gli elementi per capire dove, in relazione al contenuto dell'elemento precedente, il nuovo elemento dovrebbe essere posizionato:

Il contenuto di ciascun elemento è separato da uno spazio di 150 px, ma le caselle dei due elementi si toccano.

Se poi modifichiamo il nostro primo elemento per non avere il margine destro, il margine del margine destro si troverà nella stessa posizione del bordo del bordo destro, ei nostri due elementi ora assomigliano a questo:

box-sizing

Il modello di box predefinito ( content-box ) può essere contro-intuitivo, poiché la width / height per un elemento non rappresenterà la sua larghezza o altezza effettiva sullo schermo non appena inizierai ad aggiungere padding e stili di border all'elemento.

L'esempio seguente dimostra questo potenziale problema con il content-box :

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

Poiché il padding verrà aggiunto alla larghezza della textarea, l'elemento risultante è una textarea che è più larga del 100%.

Fortunatamente, il CSS ci consente di cambiare il modello di box con la proprietà di box-sizing del box-sizing per un elemento. Sono disponibili tre diversi valori per la proprietà:

• content-box : il modello di box comune - larghezza e altezza include solo il contenuto, non il padding o il bordo

• padding-box : larghezza e altezza includono il contenuto e il padding, ma non il bordo

• border-box : larghezza e altezza include il contenuto, il padding e il bordo

Per risolvere il problema della textarea sopra, puoi semplicemente modificare la proprietà di box-sizing della box-sizing in padding-box o border-box . border-box è più comunemente usato.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Per applicare un modello di box specifico a ogni elemento della pagina, utilizza il seguente frammento:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

In questo box-sizing:border-box; codifica box-sizing:border-box; non è direttamente applicato a * , quindi puoi facilmente sovrascrivere questa proprietà su singoli elementi.