Egenskaper - Boxar (CSS3)

Innehåll

På denna hemsida beskrivs egenskaper för boxar. Alla element i webbsidor befinner sig i "osynliga" boxar som består av tre delar:

• marginal - avståndet från kantlinjen till andra element.
• kantlinje (eng. border) - eventuell linje utanför utfyllnad, men innanför marginal (d.v.s. är inte en del av den innersta boxen eller marginalen).
• utfyllnad (eng. padding) - avståndet från elementets visuella del till kantlinjen.

Observera att webbsidor med exempel som refereras till från dessa webbsida (genom knapparna för exempel) kan bli ganska komplexa! Det är inte tänkt att de ((X)HTML- och CSS-kod) ska studeras i detalj - den kunskap som behövs beskrivs på denna webbsida eller i exempelsidornas text, inte i exempelsidornas kod! Exempelsidorna används för att visa effekten av de olika egenskaperna i stilmallar.

Egenskaper (en himla massa :-) som behandlas på denna webbsida är:

• margin-top, margin-right, margin-bottom, margin-left, margin
• padding-top, padding-right, padding-bottom, padding-left, padding
• border-top-width, border-right-width, border-bottom-width, border-left-width, border-width, border-color, border-style
• border-top, border-right, border-bottom, border-left, border

Observera att värden för dessa egenskaper kan vara negativa, d.v.s. inkräkta på omkringliggande elements boxar.

Egenskaperna för boxar är ganska många (jämfört med andra typer av egenskaper), främst för kantlinjer då dessa kan vara synliga. Många av dessa egenskaper är egentligen "genvägar".

Det går att ange endast en kants värden, och då använder man någon av egenskaperna på formen xxx-top, xxx-right, xxx-bottom eller xxx-left (ersätt xxx med margin, border eller padding).

När man använder "genvägarna" så gäller i många fall att det räcker med att ange ett eller två värden om man vill ha samma värde på alla respektive motstående sidor om element. Principen för genvägarna är att de börjar med den övre sidan och går medsols, d.v.s. i ordningen övre, högra, undre och sist vänstra. Om man inte anger fyra värden i en genväg så påverkas sirorna enligt följande:

• ett värde - samma värde för alla fyra sidor.
• två värde - motstående sidor kommer ha samma värde (första värdet avser övre och undre sidan medan det andra värdet avser högra och vänstra sidan).
• tre värde - olika värde för övre och under sidorna, men samma för höger och vänster sida (första värdet avser övre sidan, andra värdet höger och vänster sida samt sista värdet undre sidan).

Jag tjatar lite om detta då jag fann detta förvirrande till att börja med. :-)

Nedan är ett (mindre bra) exempel som försöker visa på marginal (röd), kantlinje (svart) och utfyllnad (gul) kring ett element (texten "Innehåll").

Marginaler används som sagt för att avgöra avståndet från elementets kantlinje till andra element. Värde för egenskaperna är måttenheter av något slag, vilka kan vara negativa för att "inkräkta" på kringliggande element.

• margin-top - marginal ovanför element.
• margin-right - marginal till höger om element.
• margin-bottom - marginal under element.
• margin-left - marginal till vänster om element.
• margin - genväg för att ange marginal för alla sidor om element. Värdet för denna egenskap kan vara 1, 2, 3 eller 4 måttenheter (se nedan).

Genvägen margin kan som sagt bestå av 1 till 4 måttenheter. Vilken av elementets marginaler som måttenheterna avser utgår från den övre marginalen (toppen) och sedan medurs (d.v.s. topp, höger, botten resp. vänster). Om måttenhet saknas för en marginal så används värdet från motsvarande sida (topp/botten resp. höger/vänster). Nedan beskrivs vad antalet måttenheter motsvarar.

• 1 måttenhet - marginaler på alla sidor om element är de samma.
• 2 måttenheter - marginaler på motstående sidor, topp/botten resp. höger/vänster, är de samma.
• 4 måttenheter - marginaler för respektive sida, med början från toppen och sen medsols (topp, höger, botten resp. vänster).
• 3 måttenheter - marginaler för topp, höger och botten, men även vänster då avsaknad av värde för vänster marginal kommer innebära att vänster marginal kommer få samma värde som motstående sida (d.v.s. höger marginal).

Nedan visas generella principerna för genvägen margin, följt av exempel på alla fyra marginalegenskaper och hur det skulle kunna uttryckas med genvägen istället.

Utfyllnaden är som sagt avståndet från elementets visuella del till dess kantlinje. Dessa egenskaper fungerar på samma sätt som marginaler men på insidan av elementets kantlinje.

• padding-top - utfyllnad ovanför element.
• padding-right - utfyllnad till höger om element.
• padding-bottom - utfyllnad under element.
• padding-left - utfyllnad till vänster om element.
• padding- genväg för att ange utfyllnad för alla sidor om element. Värdet för denna egenskap kan vara 1, 2, 3 eller 4 måttenheter (se nedan).

Kantlinjer för ett element är den visuella delen av elementets box och är en fyrkantig ram kring elementet, innanför elementets marginaler men utanför elementets utfyllnad.

Egenskaper för kantlinjer som påverkar dess utseende, bl.a. tjocklek, är:

• border-top-width - tjocklek på övre kantlinjen.
• border-right-width - tjocklek på högra kantlinjen.
• border-bottom-width - tjocklek på nedre kantlinjen.
• border-left-width - tjocklek på vänstra kantlinjen.
• border-width - genväg för att ange måttenheter för tjocklek på alla kantlinjer på en gång. Antalet måttenheter kan vara 1 till 4 med början på övre kantlinjen (på ett liknande sätt som för marginaler).

• border-style - stil för kantlinje.

Stilen för kantlinjer kan vara en av nedanstående. Exempel för respektive stil på kantlinje visas som undre kantlinje, d.v.s. efter stilens namn (border-bottom: xxx; - ersätt xxx med stilens namn).

• border-color - färg på kantlinje.

Det finns ett antal genvägar för kantlinjer där värden anges i ordningen tjocklek-stil-färg:

• border-top - utseende för övre kantlinjen.
• border-right - utseende för högra kantlinjen.
• border-bottom - utseende för nedre kantlinjen.
• border-left - utseende för vänstra kantlinjen.
• border - genväg för att ange utseende för alla kantlinjer på en gång. Observera att vi inte kan ange värde för motstående sidor (som för marginaler och utfyllnad).

Genvägen border kan alltså inte användas på samma sätt som för marginaler och utfyllnad. Vi kan dock göra följande för att slippa behöva ange 4 värden på kantlinjes tjocklek. Observera dock ordningen - tjockleken anges sist för att den ska fungera (i.a.f. i Firefox 1.5).

Nedan visas exempel på egenskaper och dess värden.

Exempel 4.4.1 - Marginaler, kantlinjer och utfyllnader

Genom hela CSS livstid så har det alltid funnits "problem", d.v.s. saker visas inte "enligt standard" (olika mellan olika webbläsare) eller med "skumma effekter". I detta avsnitt behandlas en del problem och dess orsak samt eventuella förslag på lösningar. (Se även referenser nedan.)

När två marginaler kommer i kontakt med varandra så blir summan av de två endast den största av dem, något som kallas för kollapsande marginaler. (Detta är inte ett problem i sig utan hur CSS är definierat!)

• Guide to Cascading Style Sheets hos Web Design Group.
• CSS-standarder hos World Wide Web Consortium (W3C)