This translation is incomplete. Please help translate this article from English.

Quan es dissenya un document, el motor d'interpretació del navegador representa cada element com una caixa rectangular d'acord amb el model de caixa CSS estàndard. CSS determina la grandària, la posició i les propietats (color, fons, grandària de la vora, etc.) d'aquests caixes.

Cada caixa es compon de quatre parts (o àrees), definides per les seves respectives vores: la vora del contingut, la vora del farciment, la vora de la vora i la vora del marge.

CSS Box model

L'àrea de contingut, limitada per la vora del contingut, conté el contingut "real" de l'element, com ara text, una imatge o un reproductor de vídeo. Les seves dimensions són l'amplada del contingut (o l'amplada de la caixa de contingut) i l'alçada del contingut (o l'alçada de la caixa de contingut). Sovint té un color de fons o una imatge de fons.

Si la propietat box-sizing s'estableix a content-box (predeterminat), la grandària de l'àrea de contingut es pot definir explícitament amb les propietats width, min-width, max-width, height, min-height i max-height.

L'àrea de farcit, delimitada per la vora de farcit, estén l'àrea de contingut per incloure el farciment de l'element. Les seves dimensions són l'amplada de la caixa de farcit i l'alçada de la caixa de farcit. Quan l'àrea de contingut té un fons, s'estén en el farcit.

El gruix del farciment està determinat pel padding-top, padding-right, padding-bottom, padding-left i les propietats abreujades de padding.

L'àrea de vora, delimitada per la vora de la vora, estén l'àrea de farciment per incloure les vores de l'element. Les seves dimensions són l'amplada de la caixa de vora i l'alçada de la caixa de vora.

El gruix de les vores està determinat per les propietats border-width i les propietats abreujades border. Si la propietat box-sizing s'estableix a border-box, la grandària de l'àrea de la vora es pot definir explícitament amb les propietats width, min-width, max-width, height, min-height i max-height.

L'àrea de marge, delimitada per la vora del marge, estén l'àrea de la vora per incloure una àrea buida utilitzada per separar l'element dels seus veïns. Les seves dimensions són l'amplada de la caixa de marge i l'alçada de la caixa de marge.

La grandària de l'àrea de marge està determinada pel margin-top, margin-right, margin-bottom, margin-left i les propietats abreujades margin. Quan es produeix el col.lapse del marge, l'àrea de marge no està clarament definida, ja que els marges es comparteixen entre les caixes.

Finalment, tingueu en compte que, per als elements en línia no reemplaçats, la quantitat d'espai ocupat (la contribució a l'alçada de la línia) està determinat per la propietat line-height encara que les vores i el farciment encara es mostran al voltant del contingut.

Especificacions

Especificació Estat Comentari
CSS Level 2 (Revision 1) Recommendation Encara que formulat amb més precisió, no hi ha canvi pràctic.
CSS Level 1 Recommendation Definició inicial.

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,