16. Mides i límits dels elements
Índex | Tema 15 | Tema 17
Presentació bàsica dels elements d'un document HTML
En absència d'especificacions expresses, els navegadors presenten el contingut dels documents HTML d'acord amb els criteris següents:
- Tot element inserit directament a BODY ocupa tota l'amplada de la finestra on es presenta el document.
- El text ocupa tota l'amplada diponible de l'element que el conté, i s'alinea a l'esquerra.
- Els elements BLOCKQUOTE i LI deixen un marge en blanc a l'esquerra.
- Però les cel·les de les taules - i en conseqüència les taules - ocupen la menor amplada possible compatible amb el contingut.
- Tot element de text es presenta immediatament a sota de l'acabament de l'anterior.
- Els elements inserits es presenten a la dreta d'un altre element inserit a condició que hi hagi espai suficient.
En aquest tema i en els dos següents analitzarem els diversos recursos que hi ha per modificar aquest comportament bàsic. Cal començar amb algunes definicions, que vénen a continuació.
Delimitació dels elements
Podem concebre que cada element d'un document HTML és delimitat per un conjunt de tres rectangles, invisibles llevat que s'especifiqui el contrari, que configuren diverses zones, com ho mostra l'esquema següent:
En aquesta figura
- L'àrea groga, delimitada pel rectangle blau, representa l'element.
- La distància entre els dos traços verticals blaus és l'amplada de l'element.
- La distància entre els dos traços horitzontals blaus és l'alçària de l'element
- Els traços del rectangle blau constitueixen la vora de l'element; en alguns elements aquesta vora pot tenir gruix o no; en d'altres, sempre té gruix nul.
- L'àrea compresa entre el traç blau i el traç vermell exterior és el marge de l'element
- L'àrea compresa entre el traç blau i el traç vermell interior és el farciment de l'element.
- La part de superfície groga delimitada pel traç vermell interior és la superfície útil de l'element.
El marge i el farciment tenen una propietat en comú: que no poden contenir res (llevat que els signes de les llistes ordenades i no ordenades es troben en els respectius marges). Però es diferencien en el fet que el marge hereta les propietats de l'element d'abast més ampli, per exemple el color de fons; el farciment, en canvi, té les del seu propi element.
Vores
Hi ha elements que poden fer visible una vora, més o menys gruixuda: els encapçalaments (h1...), les imatges, les taules i les cel·les d'aquestes.
L'aspecte de les vores d'aquests elements es pot fixar amb l'atribut border, que té 3 paràmetres:
- element {border: gruix estil color}
Els valors del gruix són thin (fi), medium (mitjà) i thick (gruixut).
Els principals valors de l'estil són none (sense vora), solid (traç continu), double (traç doble), dotted (puntejat) i dashed (traços curts).
I el color s'especifica de la manera habitual.
Si cal, es poden establir especificacions parcials amb l'ús dels termes top, bottom, left i right i width, style i color, com ara border-width i fins i tot border-bottom-width.
Podem refondre les vores dels elements adjacents amb l'especificació
- border-collapse: collapse
Algunes etiquetes HTML poden rebre l'atribut border, especificador del gruix en píxels. El W3C n'accepta l'ús en les taules i el desaconsella en els altres elements, com ara les imatges.
Marges
Els navegadors afegeixen automàticament un marge lateral a determinats elements, com ara BLOCKQUOTE i LI.
D'una manera general, els marges no predeterminats es fixen amb les expressions
- element {margin: marge}
Si cal, es pot distingir margin-top, margin-bottom, margin-left i margin-right.
L'HTML permet controlar l'espai entre les cel·les de les taules aamb l'especificació cellspacing:
- <table cellspacing="n">
que regula la separació entre les cel·les contigües.
Pel que fa a les imatges, es podien fixar els marges laterals i el superior i l'inferior amb les especificacions desaconsellades
hspace="nn"
vspace="nn
Farciment
Anàlogament el farciment es fixa amb les expressions
- element { padding: farciment }
Si cal, es poden establir especificacions com ara padding-left, construïdes amb els termes top, bottom, left i right.
L'etiqueta <table> admet l'especificació
- <table cellpadding="n">
Vores i farciments en els marcs
En el cas dels marcs es pot envoltar cada marc amb una vora
- <frame frameborder="0"|"1">
i establir-hi farciments verticals i horitzontals:
- marginheight="n"
- marginwidth="n"
Notem que, d'acord amb les definicions donades, en realitat no es tracta d'un marge del marc, sinó d'un farciment.
Especificació de l'amplada
Podem fixar l'amplada d'un element amb l'atribut width:
- element { width: amplada }
L'amplada es pot especificar en píxels o en percentatge. Una amplada especificada en % pren com a base l'amplada de l'element jeràrquicament superior en què està inclòs.
Dins algunes etiquetes HTML es pot fer servir l'atribut width. El W3C n'accepta l'ús a TABLE, a COL - columnes de les taules -, a IFRAME i a IMG, i el desaconsella en tots els altres casos (inclosos TH i TD).
Alçada
En absència d'especificacions, tots els elements adquireixen l'alçada suficient - i no pas més - per mostrar el contingut de què són portadors.
D'una manera general, les especificacions d'alçada es fan amb height:
- element { height: alçada }
Cal prendre moltes precaucions a l'hora de fixar una alçada: cal assegurar que en qualsevol circumstància el continent és més gran que el contingut, però tampoc massa més gran, per qüestions estètiques. Cal tenir present que l'espai necessari per a contenir un text depèn de múltiples factors:
- La mida de la lletra.
- La tria que l'usuari faci en el seu navegador.
- Les diferents resolucions de pantalla.