Continguts:

1. Introducció
2. Dimensions d'una caixa
3. Exemple de marges, farciment i vores
4. Propietats de marge: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' i 'margin'
4.1. Marges col·lapsats
5. Propietats de farciment: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' i 'padding'
6. Propietats de vora
6.1. Amplada de vora: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' i 'border-width'
6.2. Color de vora: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', i 'border-color'
6.3. Estil de vora: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', i 'border-style'
6.4. Propietats drecera de vora: 'border-top', 'border-bottom', 'border-right', 'border-left', i 'border'
1. Introducció
El model de caixa de CSS descriu les caixes rectangulars que es generen per als elements de l'arbre del document i són presentades d'acord amb el model de formatat visual. La caixa de pàgina és un tipus especial de caixa que es descriu en detall en el tema "Mitjans paginats".
2. Dimensions d'una caixa
Cada caixa té una àrea de contingut (per ex., text, una imatge, etc.) i opcionalment l'envolten unes àrees de farciment, de vora i de marge; la mida de cada àrea s'especifica mitjançant les propietats que ara es definiran. El següent diagrama mostra com es relacionen aquestes àrees i la terminologia utilitzada per a referir-se a porcions de marge, vora i farciment:



El marge, la vora i el farciment es poden dividir cada un en segments esquerre, dret, superior i inferior (per ex., en el diagrama, "ME" és el marge esquerre, "FD" és el farciment dret, "VS" és la vora superior, etc.).

El perímetre de cada una de les quatre àrees (contingut, farciment, vora i marge) s'anomena "límit", per tant, cada caixa té quatre límits:

límit del contingut o límit interior
El límit del contingut envolta el contingut presentat de l'element.


límit del farciment
El límit del farciment envolta el farciment de la caixa. Si el farciment té una amplada 0, el límit del farciment és el mateix que el límit del contingut. El límit del farciment d'una caixa defineix els límits del bloc contenidor establert per la caixa.


límit de la vora
El límit de la vora envolta la vora de la caixa. Si la vora té una amplada 0, el límit de la vora és el mateix que el límit del farciment.


límit del marge o límit exterior
El límit del marge envolta el marge de la caixa. Si el marge té una amplada 0, el límit del marge és el mateix que el límit de la vora.

Cada límit també pot dividir-se en límit esquerre, dret, superior i inferior.

Les dimensions de l'àrea de contingut d'una caixa -- l'amplada del contingut i l'alçada del contingut -- depenen de diversos factors: de si l'element que genera la caixa té les propietats width o height inicialitzades, de si la caixa conté text o altres caixes, de si la caixa és una taula, etc. Les amplades i alçades de les caixes es discuteixen en el tema sobre els detalls del model de formatat visual.

L'amplada d'una caixa ve donada per la suma dels marges esquerre i dret, la vora, el farciment i l'amplada del contingut. L'alçada ve donada per la suma dels marges superior i inferior, la vora, el farciment i l'alçada del contingut.

L'estil del fons de les diverses àrees d'una caixa ve determinat tal i com segueix:

3. Exemple de marges, farciment i vores
Aquest exemple il·lustra com interactuen els marges, el farciment i les vores. El document HTML exemple:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Exemples de marges, farciment i vores</TITLE>
<STYLE type="text/css">
   UL {
      background: green; 
      margin: 12px 12px 12px 12px;
      padding: 3px 3px 3px 3px;
   }                               /* No es fixa cap vora */
   LI { 
      color: black;                /* el color del text és negre */
      background: gray;            /* el contingut i el farciment
                                      seran de color gris */
      margin: 12px 12px 12px 12px;
      padding: 12px 0px 12px 12px; /* 0px de farciment dret */
      list-style: none             /* cap glyph davant d'un ítem
                                      de llista */
   }                               /* No es fixa cap vora */
   LI.ambvora {
      border-style: dashed;
      border-width: medium;        /* fixa l'amplada de la vora de
                                      tots els costats */
      border-color: black;
   }
</STYLE>
</HEAD>
<BODY>
   <UL>
      <LI>Primer element de la llista
      <LI class="ambvora">El segon element de la llista és més llarg
	                  per il·lustrar el plegament
    </UL>
</BODY>
</HTML>
[Resultat]

resulta en un arbre de document amb (entre d'altres relacions) un element UL que té dos fills LI.

El següent diagrama il·lustra què produiria aquest exemple. El segon il·lustra la relació entre els marges, el farciment i les vores dels elements UL i dels elements LI fills:



Cal observar que:

4. Propietats de marge: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' i 'margin'
Les propietats de marge especifiquen l'amplada de l'àrea de marge d'una caixa. Per a especificar l'amplada del marge de cada costat per separat (superior, dret, esquerre i inferior) hi ha les propietats margin-top, margin-right, margin-left i margin-bottom, respectivament; la propietat drecera margin assigna el marge per a tots quatre costats.
4.1. Marges col·lapsats
En l'especificació de CSS2 (i, per tant, en aquest manual) l'expressió marges col·lapsats significa que els marges contigus (no hi ha cap àrea de farciment ni de vora que els separi) de dues o més caixes (les quals poden trobar-se l'una al costat de l'altra o bé aniuades) es combinen per a formar un sol marge.

En CSS2 els marges horitzontals mai es col·lapsen.

Els marges verticals pot ser que es col·lapsin entre certes caixes:


Podeu consultar els exemples de marges, farciment i vores per veure una il·lustració del què són els marges col·lapsats.
5. Propietats de farciment: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' i 'padding'
Les propietats de farciment especifiquen l'amplada de l'àrea de farciment d'una caixa. La propietat drecera padding inicialitza el farciment per a tots quatre costats mentre que les altres propietats de farciment (padding-top, padding-right, padding-left i padding-bottom) només ho fan pels seus respectius costats (superior, dret, esquerre i inferior).
6. Propietats de vora
Les propietats de vora especifiquen l'amplada, el color i l'estil de l'àrea de vora d'una caixa. Aquestes propietats s'apliquen a tots els elements.

Nota. Notablement per a l'HTML, els agents d'usuari poden presentar vores per a certs elements (per ex., botons, menús, etc.) de manera diferent que per als elements "ordinaris".
6.1. Amplada de vora: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' i 'border-width'
Les propietats d'amplada de vora especifiquen l'amplada de l'àrea de vora. La propietat drecera border-width assigna l'amplada de la vora per a tots quatre costats de la caixa mentre que les altres propietats d'amplada de vora (border-top-width, border-right-width, border-bottom-width i border-left-width) només ho fan pels seus respectius costats (superior, dret, inferior i esquerre).
6.2. Color de vora: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', i 'border-color'
Les propietats de color de vora especifiquen el color de la vora d'una caixa. La propietat drecera border-color assigna el color de la vora per a tots quatre costats de la caixa mentre que les altres propietats de color de vora (border-top-color, border-right-color, border-bottom-color i border-left-color) només ho fan pels seus respectius costats (superior, dret, inferior i esquerre).
6.3. Estil de vora: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', i 'border-style'
Les propietats d'estil de vora especifiquen l'estil de línia de la vora d'una caixa (sòlida, doble, discontínua, etc.). La propietat drecera border-style assigna l'estil de la vora per a tots quatre costats de la caixa mentre que les altres propietats d'estil de vora (border-top-style, border-right-style, border-bottom-style i border-left-style) només ho fan pels seus respectius costats (superior, dret, inferior i esquerre).
6.4. Propietats drecera de vora: 'border-top', 'border-bottom', 'border-right', 'border-left', i 'border'
Les propietats drecera de vora especifiquen l'amplada, l'estil i el color de la vora d'una caixa. La propietat drecera border assigna l'amplada, l'estil i el color de totes les vores d'una caixa, mentre que les altres propietats drecera de vora border-top, border-bottom, border-right i border-left ho fan només pels seus respectius costats (superior, inferior, dret i esquerre).
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos