16. Mides i límits dels elements

 

Índex

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:

Exemple

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:

esquema

En aquesta figura

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...), els paràgrafs, 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:

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.

I que es formi una ombra amb sensació de relleu:

Podem refondre les vores dels elements adjacents amb l'especificació

Exemple

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.

 

Vores no rectilínees

A més, podem aconseguir que els vértexs del rectangle sigui arrodonits:

on n és el radi de la circunferència, mesurat en píxels.

Aquest recurs, portat a l'extrem, permet que la vora de l'element es presenti com una circumferència:

Exemple

 

Vores en els marcs

En absència d'especificació en contra, les vores que delimiten el marc es posen de manifest d'una manera que depèn del navegador; en general, amb traços rectilinis grisos.

Amb els fulls d'estil això es pot modificar.

Amb l'especificació

la vora desapareix.

Exemple

Si, contràriament, volem especificar una vora d'un estil determinat, hem de fer servir la fórmula general per a les vores:

Exemple

En el cas de la vora invisible, hi ha una solució desaconsellada pel W3C però que encara reconeixen els navegadors:

 

Color de fons

L'aplicació de background-color es sensible a determinades combinacions amb la vora.

Exemple

 

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

Si cal, es pot distingir margin-top, margin-bottom, margin-left i margin-right.

Hi ha una sèrie de recursos actualment desaconsellats però que encara es poden veure en molts documents. Per a controlar l'espai entre les cel·les de les taules, hi havia l'especificació cellspacing:

I pel que fa a les imatges,

 

Farciment

Anàlogament el farciment es fixa amb les expressions

Exemple

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ó

 

Especificació de l'amplada

Podem fixar l'amplada d'un element amb l'atribut width:

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.

Exemple

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:

Exemple

Cal prendre moltes precaucions a l'hora de fixar l'alçada d'un element que hagi de tenir contingut: 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 a més que l'espai necessari per a contenir un text depèn de la mida de la lletra, de la resolució de la pantalla i de la tria que l'usuari faci en el seu navegador.

Exemple