Secció 3: Propietats

4. Propietats relacionades amb les caixes

4.3. Dimensions d'una caixa

L'amplada d'una caixa ve donada per la suma dels marges, vores i padding horitzontals més l'amplada de l'àrea de contingut. Al seu torn, l'alçada d'una caixa és el resultat de sumar els marges, vores i padding verticals amb l'alçada de l'àrea de contingut.

Fantàstic, no hem resolt res. Com sabem quines són l'alçada i l'amplada de l'àrea de contingut? Doncs la resposta no és senzilla. Depèn de diversos factors, principalment de si l'element que genera la caixa té o no assignades les propietats width i height. No podem entrar ara en detalls, però com a norma general:

• El contingut ocupa el màxim espai horitzontal disponible, excepte en el cas que s'especifiqui la propietat width de l'element.
• Un cop determinada la seva amplada, el contingut ocupa tant espai vertical com sigui necessari.

Pensa en com es veuen els paràgrafs, per exemple els d'aquest text. Primer ocupen el màxim espai horitzontal. A continuació s'estén la caixa cap a baix, fins que hi cap tot el contingut. Ara bé, si en un paràgraf especifiquem un valor per 'width', per exemple 100px, forçarem la mida horitzontal de la caixa. Com que les línies de text seran més curtes, caldrà un major nombre de les mateixes, així que l'alçada de la caixa serà més gran. Pots comprovar-ho al quadre següent.

I tot i que em podria estendre bastant més ;-) deixarem aquí la descripció teòrica del box model, i començarem ja a veure les propietats en si. Un cop entesos els conceptes fins aquí explicats, comprovaràs com la majoria de propietats relacionades amb les caixes s'expliquen a sí mateixes. A més, margin, border i padding es comporten de forma molt similar, i tot i que el nombre total de propietats que veurem a continuació és molt elevat (30!), moltes d'elles són equivalents.