D27: XHTML i CSS. Introducció als estàndards i accessibilitat web

El model de caixa (i II): farciments, vores i marges

marges (`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:

Elements en línia

Els valors del marge superior (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;
	}

Elements en bloc

Els valors dels marges dels elements en bloc, poden ser positius com negatius. Un valor positiu dels marges provocarà que els elements adjacents es desplacin, mentre que un valor negatiu provocarà tot el contrari, farà que s'acostin, o fins i tot que es superposin, en el cas que superin el límit de la caixa de l'element.

Quan els marges es col·lapsen

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.

Vores (`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:

El valor que indica el gruix de les vores no pot ser mai negatiu, ja que està limitat pels marges de la caixa.
Les vores que hi hagi entre dos blocs estàtics mai es col·lapsen, com pot passar amb els marges.
Les vores esquerra i dreta d'un element en línia apareixen sempre al començament i al final d'aquest.
Les vores superior i inferior d'un element en línia poden solapar-se segons quin sigui el valor de la propietat 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.

Obriu l'arxiu border.html per veure l'exemple de l'ús de la propietat.

Tipus d'estil de les vores

Farciment (`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.

Veieu l'exemple padding.html:

.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:

Dos valors

	
/* padding: [top-bottom] [right-left] */
	padding: 30px 40px;

equival a:

	
	padding: 30px 40px 30px 40px;

Tres valors

	
 /* 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:

El padding, com les vores i els marges, modifica la possició de l'element i la dels seus veins.
De la mateixa manera que les vores, el 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).
El valor del padding mai pot ser negatiu, ja que està contingut dins del model de caixa, limitat pels marges i per les vores.
El valor del padding no té cap efecte sobre l'element taula, però sí sobre les seves cel·les.
L'estil del padding és transparent.

Tornar a l'inici de la pràctica

Mòdul 7: Composició

El model de caixa (i II): farciments, vores i marges

marges (margin)

Quan els marges es col·lapsen

margin: auto

Vores (border)

Farciment (padding)

marges (`margin`)

`margin: auto`

Vores (`border`)

Farciment (`padding`)