margin
)Els marges representen una àrea transparent que envolta la caixa. Per defecte, a tots els elements del document se'ls assigna un valors de margin: 0
, però els navegadors modifiquen aquest valor segons l'element. Per exemple, a un element de capçalera de primer nivell, sense cap regla d'estil associada, el navegador li assignarà un valor X per als marges.
La propietat margin
, com s'ha vist a la pràctica anterior, es pot desplegar en quatre noves propietats, segons el costat de la caixa que identifiqui. A més del valor de margin com a propietat global, es troben, doncs, els quatre valor corresponents als quatre costats: margin-top
(marge superior), margin-right
(marge dret), margin-bottom
(marge inferior) i margin-left
(marge esquerre):
h1 { margin-top: 20px; margin-right: 30px; margin-bottom: 100px; margin-left: 10px; }
El comportament dels marges poden variar segons el tipus d'element al que s'apliqui la propietat:
top
) i inferior (bottom
) són ignorats. Si obriu l'exemple margin.html i assigneu un valor X a les propietats margin-top
o margin-botton
de la regla associada a l'element en línea strong
, no tindrà cap efecte:
strong { margin-top: 100px; }En canvi, els valors del marge esquerre i dret provocaran, si el valor és positiu, un desplaçament cap a la dreta de l'element en línia respecte al seu límit esquerre. Mentre que si és negatiu, el desplaçament serà cap a la dreta, superposant-se al bloc de text que el conté, tal i com es pot veure si modifiqueu la propietat:
strong { margin-left: -20px; }
Quan dos o més marges entren en contacte, es produeix un efecte conegut com a col·lapse de marges. Llavors, la distància que quedarà entre les caixes, serà el valor més gran dels marges en contacte, enlloc de la suma dels dos. Despareix, per tant, el valor del marge més petit i es manté el marge de mida més gran. Veieu l'exemple obrint de nou l'arxiu margin.html:
.model_box_1 { margin: 0px auto; margin-bottom: 20px; width: 350px; border: 30px solid #555; } .model_box_2 { margin: 0px auto; margin-top: 60px; width: 350px; border: 30px solid #555; }
El paràgraf amb la classe .model_box_1
conté un valor de marge inferior menor (20px
) al marge superior del paràgraf de classe .model_box_2
, de 60px
. Per tant el marge inferior del primer s'anul·larà, i l'espai que quedarà entre els dos serà el del segon (60 px
).
Exemple de col·lapse de marges
margin: auto
Un valor especial de la propietat del marge és auto
. A la major part d'elements, margin: auto; equival a margin: 0
; és a dir, sense marge. Però si es tracta d'un element de bloc, el valor auto
el que farà serà expandir el valor dels marges, sempre que aquests corresponguin als marges laterals. Veieu un exemple:
.model_box_3 { margin-right: 0px; margin-left: auto; }
Amb la regla ".model_box_3" , el paràgraf quedarà sempre alineat a la dreta de la pantalla, independentment de les dimensions de la finestra del navegador. El valor auto
s'encarrega de fixar sempre el valor del marge esquerre per tal que això sigui possible.
border
)Un especial interès té la propietat border
. Les vores treballen de manera idèntica a la propietat de marge
: modifiquen, segons el seu valor, la posició d'un element i la dels seus veins.
Les característiques principals de la propietat border són:
line-height
. Modificant aquest valor es pot corregir la superposició de les vores verticals.Com les altres propietats del model de caixa, la propietat border
es pot dividir en quatre propietats més, segons el costat seleccionat del model de caixa: border-top
, border-right
, border-bottom
i border-left
. A cada una d'elles, igual que a la propietat general border
, s'han d'especificar els següents valors:
border
: [amplada de la vora] [estil] [color]border-right
: [amplada de la vora] [estil] [color]border-left
: [amplada de la vora] [estil] [color]border-top
: [amplada de la vora] [estil] [color]border-bottom
: [amplada de la vora] [estil] [color]L'amplada de la vora i el color es poden designar segons les unitats i mesures presentades a la pràctica 6 del mòdul 2. Respecte a l'estil de la vora, es poden determinar tres valors diferents: solid
, sòlid; dotted
, puntejat i dashed
, discontinu.
Tipus d'estil de les vores
padding
)Com ja s'ha anat veient, totes les propietats relacionades amb el model de caixa es poden dividir en quatre noves propietats, segons el costat de la caixa a que facin referència. De la propietat padding
es derivaran les propietats padding-top
, padding-right
, padding-bottom
i padding-left
, de la mateixa manera que s'ha vist que passava amb les propietats anteriors (border
i margin
). Amb aquestes quatre regles es podran definir valors diferents al quatre farciments del model de caixa.
.model_box { width: 350px; border: 30px solid #555; padding-top: 20px; padding-right: 40px; padding-bottom: 100px; padding-left: 5px; }
L'assignació de valors diferents segons el costat triat del model de caixa es pot realitzar també amb la propietat genèrica, padding
. L'anterior regla es podria escriure:
.model_box { width: 350px; border: 30px solid #555; padding: 20px 40px 100px 5px; }
i el resultat sería el mateix. L'ordre en que s'han d'especificar els quatre valors segueix el sentit de les agulles del rellotge:
padding: [top] [right] [bottom] [left]
La sintaxi CSS permet també les següents combinacions:
/* padding: [top-bottom] [right-left] */ padding: 30px 40px;equival a:
padding: 30px 40px 30px 40px;
/* padding: [top] [right-left] [bottom]*/ padding: 30px 50px 40px;equival a:
padding: 30px 50px 40px 50px;
Aquesta regla serveix igualment per a d'altres propietats del model de caixa: border-width
i margin
.
A nivell de comportament, el padding
actua de la mateixa manera que les vores:
padding
, com les vores i els marges, modifica la possició de l'element i la dels seus veins.padding
superior (top
) i inferior (bottom
) d'un element en línia es pot superposar sobre vores adjacents. Aquesta situació es pot corregir fàcilment augmentant el valor del line-height (alçada de la línia).padding
mai pot ser negatiu, ja que està contingut dins del model de caixa, limitat pels marges i per les vores.padding
no té cap efecte sobre l'element taula, però sí sobre les seves cel·les.padding
és transparent.