Secció 3: Propietats

4. Propietats relacionades amb les caixes

4.4. Propietats margin

Les propietats margin estableixen la mida de l'àrea margin d'una caixa, i són margin-top, margin-right, margin-bottom i margin-left.

La mida dels marges es pot especificar mitjançant:

• longituds. Si utilitzem unitats relatives (em, ex), faran referència a la mida de la font de l'element.
• percentatges. Es calculen respecte l'amplada total de la caixa que conté l'element, fins i tot per als marges verticals! Fixa't que a diferència del que passava amb la propietat font-size, els percentatges i les unitats em o ex es calculen respecte models diferents.
• auto. L'ús de la paraula clau 'auto' s'explicarà a la Secció 4.

Els valors per als marges poden ser negatius. En veurem exemples a la Secció 4 quan estudiem el posicionament CSS.

Per exemple, l'style sheet:

P {
font-size: 14px;
margin-top: 2em;
margin-bottom: 3em; }

P.cita {
margin-top: 0px;
margin-left: 50%; }

podria generar el següent resultat:

Aquest és un paràgraf 'normal'. La mida de la font és de 14px. El marge superior és de 2em (2*14) = 28px. El marge inferior és de 3em (3*14) = 42px.

Aquest és un paràgraf de classe 'cita'. El marge superior és ara de 0px, així que si veiem els paràgrafs separats és gràcies al marge inferior del primer. El marge esquerre ocupa la meitat de l'amplada total de la caixa que conté l'element i, per tant, el contingut començarà a la meitat de la pàgina.

En l'exemple anterior, la caixa generada pel paràgraf de classe 'cita' continua ocupant tot l'espai horitzontal disponible (igual que el paràgraf normal), però la meitat esquerra està ocupada per la seva àrea margin esquerra.

BODY { font-size: 20px; }

P.a {
font-size: .8em;
margin-left: .5em; }

P.b {
font-size: 80%;
margin-left: 50%; }

margin (shortcut property)

Una alta possibilitat és utilitzar la propietat margin, que permet especificar alhora les propietats margin-top, margin-right, margin-bottom i margin-left. Els diferents valors s'escriuen un darrere l'altre i separats per espais.

• Si s'especifiquen 4 valors, aquests corresponen a les propietats 'top', 'right', 'bottom' i 'left', per aquest ordre.
• Si s'especifiquen 3 valors, el primer correspon a 'top', el segon als marges horitzontals ('left' i 'right') i el tercer a 'bottom'.
• Si s'especifiquen 2 valors, el primer correspon als marges verticals i el segon als marges horitzontals.
• Si s'especifica 1 sol valor, aquest s'aplica a tots quatre costats.

H1 { margin: 2em 10% 3em 10%; }

H1 { margin: 2em 10% 3em; }

H1 {
margin-top: 2em;
margin-right: 10%;
margin-bottom: 3em;
margin-left: 10%;}

Les tres sentències són equivalents. Fixa't que es poden barrejar diferents tipus de valors en una mateixa propietat margin.

Nota: aquesta estructura de quatre propietats (una per a cada costat) més una shortcut property (per assignar alhora les quatre anteriors) es repetirà amb les propietats padding i border.

H1 {
font-size: 20px;
margin-left: 50px;
margin: 10px 2em 10%; }

Col·lapse de marges

Una situació de col·lapse de marges es produeix quan els marges de dues o més caixes són adjacents i es combinen per formar-ne un de sol. El marge resultant és el màxim dels marges adjacents. Vegem-ne un exemple:

H1 { margin-bottom: 40px; }
P  { magin-top: 20px; }

<H1>Col·lapse de marges</H1>
<P>El marge superior d'aquest paràgraf és de 10px i es col·lapsa amb el marge inferior del títol, que és de 40px. El marge resultant serà el més gran dels dos, és a dir, 40px.</P>

Ara bé, dos marges adjacents no sempre es col·lapsen. L'estudi detallat de tots els casos possibles es massa complex en aquest punt del curs, però sí podem enunciar les dues regles bàsiques:

• Els marges horitzontals mai es col·lapsen.
• Els marges verticals de caixes generades per elements de bloc sí que es col·lapsen.

Nota: per ésser del tot estrictes hauríem de dir que els marges verticals es col·lapsen quan són de caixes generades per elements de bloc en el fluxe normal. Quan els elements no estan en el fluxe normal, és a dir, estan posicionats, els marges tampoc no es col·lapsen. Els conceptes de 'fluxe normal' i 'posicionament' els veurem a la Secció 4.

També és pot produir una situació de col·lapse de marges entre caixes generades no per dos elements situats un al costat de l'altre, sinó per un element pare i un element fill. És a dir, les caixes no estan una a continuació de l'altra, sinó una dins de l'altra. Els marges de les caixes seran igualment adjacents, i les regles de col·lisió de marges funcionaran igual que en el cas anterior. Per exemple, l'style sheet:

DIV { 
background-color: black;
margin: 20px; }

P {
background-color: #bed3b4; /* un verd clar */
margin: 50px;
margin-bottom: 0; }

aplicada sobre el fragment HTML:

<DIV>
   <P>Aquest paràgraf està inclòs en un element DIV. Com que tots dos tenen marge associat es produeix col·lisió de marges.</P>
</DIV>

genera el resultat següent:

Gràcies als colors de fons pots observar quins efectes fan els marges. El color gris és el color de fons del navegador, i és el color que correspon al marge del DIV (recorda que els marges són transparents!). El color negre és el color de fons del DIV i, per tant, correspon al marge del P. Fixa't que:

• Els marges horitzontals no s'han col·lapsat. Pots veure els 20px del marge del DIV (gris) i els 50px del marge del P (negre).
• Els marges verticals sí s'han col·lapsat. Efectivament, no es veu color negre ja que els marges dels dos elements s'han combinat per formar-ne un de sol. El marge superior del P és més gran que el del DIV, i per tant el marge resultant és de 50px. En canvi el marge inferior més gran és el del DIV, i per això el marge resultant és de 20px.

Pregunta

Sabries dir quin és el valor en píxels de les distàncies a, b, ... , f en l'exemple següent?

BODY {
font-size: 12px;
margin: 20px;
margin-top: 50px; }

H1 {
font-size: 1.5em;
margin: 2em 20px 1.5em 10px; }

P {
margin: 1em 60px; }

Solució >>

a=30 | b=50 | c=40 | d=27 | e=80 | f=80 | g=20

---

Reescric l'style sheet substituint els valors en em per l'equivalent en píxels. Recorda que en el cas de font-size 1.5em fa referència a la mida de la font de l'element pare (els 12px de BODY): 1.5 * 12 = 18px, mentre que per a les propietats margin les unitats em fan referència al valor de font-size de l'element en qüestió.

 BODY {
 font-size: 12px;
 margin: 20px;
 margin-top: 50px; }

 H1 {
 font-size: 18px;
 margin: 36px 20px 27px 10px; }

 P {
 /* font-size val 12px */
 margin: 12px 60px 12px 60px; }

Ara només hem de recordar que únicament els marges verticals es col·lapsen. Així que per trobar b, d i g (marges verticals) haurem de comparar els dos marges adjacents en cada cas, i quedar-nos amb el més gran. En canvi per a, c, e i f (marges horitzontals) haurem de sumar els marges adjacents, és a dir, cada marge dels elements amb el marge corresponent del BODY.

- Tancar -

Marges i herència

A diferència de la majoria de propietats relacionades amb el text, les propietats margin no s'hereten, com tampoc no ho fan les propietats padding i border, que veurem a continuació.

I sort que és així! Imagina que sí s'heretessin els marges i assignéssim un marge de 20px a l'element BODY. Tots els elements són fills de BODY i, per tant, tots tindrien automàticament un marge de 20px (els títols, els paràgrafs, els links, la negreta, els DIVs...). Alguns d'aquests marges es col·lapsarien i d'altres no, amb l'agravant que es produirien casos de col·lisió més complexos que els que hem vist en l'apartat anterior. En definitiva, establir els marges pels diferents elements d'una pàgina es tornaria una feina complicadíssima! Així doncs, si volem que un element tingui els mateixos marges que el seu element pare, haurem d'escriure la propietat margin a tots dos elements. O, si encara recordes alguna cosa de la Secció 2, utilitzar grups de selectors. ;-)