CSS Qual è il modello di scatola?


Esempio

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.

CSS Box Model

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:

Box Model per l'esempio sopra

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:

Due elementi identici uno accanto all'altro

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:

Primo elemento senza margine destro