Secció 3: Propietats
4. Propietats relacionades amb les caixes
4.5. Propietats padding
Les propietats padding estableixen la mida de l'àrea padding d'una caixa, i són padding-top, padding-right, padding-bottom i padding-left. El seu funcionament és pràcticament idèntic al de les propietats margin.
Els possibles valors per a les propietats padding són longituds i percentatges. Igual que amb les propietats margin, els percentatges es calculen respecte l'amplada de la caixa on es troba l'element.
Nota: al menys en teoria. Netscape 6 ho fa així, però Internet Explorer calcula els percentatges respecte la caixa generada per l'element, i no la caixa que el conté. Sovint la caixa generada ocupa tota l'amplada disponible, i per tant coincideix amb la caixa contenidora, però no sempre. Per desgràcia els navegadors continuen sense ser del tot respectuosos amb l'especificació CSS.
P {
background-color: #bed3b4;
padding-left: 10%;
padding-right: 200px; }
La sentència anterior generaria títols H2 amb l'aspecte següent:
Aquest paràgraf té padding esquerre (10%) i dret (200px). Recorda que utilitzar percentatges per al padding és delicat, ja que en alguns casos Internet Explorer i Netscape els interpreten de forma diferent.
A diferència de les propietats margin, els valors per les propietats padding no poden ser negatius.
El color de fons de l'àrea padding serà el que tingui la propietat background-color de l'element, és a dir, el padding té el mateix color de fons que l'àrea de contingut de la caixa. Només es diferencia d'aquesta justament en el fet que no té contingut.
padding (shortcut property)
De forma anàloga al que passava amb els marges, disposem d'una shortcut property per als padding, la propietat anomenada precisament padding. El funcionament de padding és exactament igual al de margin.
H1 {
background-color: #8ea384;
color: #bed3b4; }
H1.amb-padding {
padding: 5px 30px; }
P {
background-color: #bed3b4;
padding: 10px 20px 10px 100px; }
H1 'normal'
H1 de classe 'amb-padding'
Aquest paràgraf té diferents valors de padding als quatre costats. El padding superior i inferior és de 10px, l'esquerre és de 100px i el dret de 20px.
Pregunta
1) Fixa't que en el títol H1 'normal' hi ha espai entre els extrems superior i inferior de la caixa i el contingut. Si no hi hem assignat cap padding, no hauria d'estar el contingut enganxat a l'extrem de la caixa, com passa amb el padding esquerre?
2) En el títol 'H1.amb-padding', com és que el padding dret és més gran que l'esquerre si tots dos tenen el valor 30px?
Solució >>2) En realitat no és més gran, tots dos padding tenen el valor de 30px. Però el contingut de l'element (el text) no ocupa tota l'amplada de la caixa, i per això sembla que el padding dret sigui més gran.
4. Propietats relacionades amb les caixes: Propietats border
