Boxegenskaper
marginaler, ramar, fyllnader

[Margin-top] [Margin-right] [Margin-bottom] [Margin-left] [Margin] [Padding] [Border-width] [Border-color] [Border-style] [Border-top|right|bottom|left] [Border] [Width] [Height] [Float] [Clear]

Med box egenskaper kan du specificera elementens storlek, marginaler, placering och förhållanden. Mer information om hur ett element eller snarare den rektangulära boxen som det representerar "ser ut" finns i "Struktur - format".

Det finns följande boxegenskaper:

• margin-top, margin-right, margin-bottom, margin-left som kan förkortas till margin
• padding-top, padding-right, padding-bottom, padding-left som kan förkortas till padding
• border-top-width, border-right-width, border-bottom-width, border-left-width som kan förkortas till border-width
• border-color
• border-style
• border en förkorting för border-width, border-style och border-color
• width
• height
• float
• clear

värden: <length> | <percentage> | auto (utgångsvärde - 0)
kan tilldelas: alla element
arv: nej

Med denna egenskap kan du specificera den högre marginalen för ett element (box) eller ett helt dokument.

H1 {margin-top: 3em}
BODY {margin-top: 1cm}

värden: <length> | <percentage> | auto (utgångsvärde - 0)
kan tilldelas: alla element
arv: nej

Med denna egenskap kan du specificera den högra marginalen för ett element (box) eller ett helt dokument.

H1 {margin-right: 0.5in}
BODY {margin-right: 2%}

värden: <length> | <percentage> | auto (utgångsvärde - 0)
kan tilldelas: alla element
arv: nej

Med denna egenskap kan du specificera den nedre marginalen för ett element (box) eller ett helt dokument.

H1 {margin-bottom: 10mm} BODY {margin-top: 3px}

värden: <length> | <percentage> | auto (utgångsvärde - 0)
kan tilldelas: alla element
arv: nej

Med denna egenskap kan du specificera den vänstra marginalen för ett element (box) eller ett helt dokument.

H1 {margin-left: 0.5in} BODY {margin-left: 2%}

värden: <length> | <percentage> | auto | {1,4} (utgångsvärde - inte definierat)
kan tilldelas: alla element
arv: nej

Istället för att deklarera varje marginal för sig kan du med denna egenskap specificera en, några eller alla på en gång. Men eftersom ett element kan ha fyra olika marginaler måste förkortningen ske enligt visa regler, dvs en viss ordning som gör det klart vilka värden som ska tilldelas vilken marginal. En sådan förkortningsregel kallas för regeln {1,4} och betyder en till fyra. Hur regeln fungerar beskrivs längre ner.

Om elementet BODY tilldelas:

BODY {margin-top: 1cm}
BODY {margin-right: 1cm}
BODY {margin-bottom: 1cm}
BODY {margin-left: 1cm}

kan det förkortas:

BODY {margin: 1cm}

Alla fyra marginalerna margin-top, margin-right, margin-bottom och margin-left kommer att vara 1 cm.

medan

BODY {margin-top: 1cm}
BODY {margin-right: 2cm}
BODY {margin-bottom: 3cm}
BODY {margin-left: 4cm}

kan förkortas:

BODY {margin: 1cm 2cm 3cm 4cm}

Förkortningen kan även ske parvis: ett par margin-top och margin-bottom och ett annat par margin-left och margin-right. Så om du skriver:

BODY {margin: 2cm 1cm}

kommer paret övre/nedre visas med 2 cm marginal medan paret höger/vänster visas med 1 cm marginal.

Observera ordningen på marginalegenskapen - övre, höger, nedre, vänster. Övre och nedre marginal hör ihop samt höger och vänster. Men om du skriver:

BODY {margin: 2cm 1cm 3cm}

kommer den övre marginalen vara 2 cm, höger och vänster 1 cm och nedre 3 cm.

Regel {1,4} - (en till fyra)

BODY {margin: 2cm 10% 1cm 5%}

1 mått - alla marginaler
2 mått - 1) övre/nedre 2) höger/vänster
3 mått - 1) övre 2) höger/vänster 3) nedre
4 mått 1) övre 2) höger 3) nedre 4) vänster

Genom att tilldela höger- och vänstermarginalen värdet auto kommer värdena att vara likvärdiga. På så sätt kan du centrera ett element inuti föräldern.

P {margin-right: auto; margin-left: auto}

värden: <length> | <percentage> | {1,4} (utgångsvärde - 0)
kan tilldelas: alla element
arv: nej

Denna egenskap är en förkortning för padding-top, padding-right, padding-bottom och padding-left och lägger till ett utfyllnadområde runt ett element. Värdena kan specificeras var för sig eller enligt {1,4} regeln.

P {padding: 1mm}

kommer att skapa "luft" på 1mm runt om ett stycke som läggs ihop med eventuella marginaler.

P {padding-right: 1mm} /*endast höger*/
P {padding: 1mm 2mm} /*övre/nedre 1 mm, vänster/höger 2 mm */

värden: thin | medium | thick | <length> | {1,4} (utgångsvärde - medium för enskilda och inte specificerad för förkortningen)
kan tilldelas: alla element
arv: nej

Denna egenskap är en förkortning för border-top-width, border-right-width, border-bottom-width, border-left-width och specificerar bredden på ramen runt ett element (inkl. padding). Värdena kan specificeras var för sig eller enligt regeln {1,4}.

P {border-width: thin}

ska rita en tunn ram runt hela stycket.

värden: <color> | {1,4}
kan tilldelas: alla element
arv: nej

Denna egenskap sätter färg på den ram som specificerades med egenskapen border-width. Om en ram till exempel bara har tre kanter kommer endast dessa tre kanter att färgsättas. Men om du bara vill färgsätta en eller två kanter av de tre använder du dig av {1,4} regeln. Om egenskapen inte specificeras kommer ramen att ha samma färg som elementet.

P {border-width: thin; border-color: red}

värden: none | dotted | dashed | solid | double | groove | ridge | inset | outset | {1,4} (utgångsvärde - none)
kan tilldelas: alla element
arv: nej

Denna egenskap specificerar stilen enligt {1,4} regeln på den ram som specificerades med egenskapen border-width.

P {border-width: thick;
border-style: solid}

kan tilldelas: alla element
arv: nej

Genom att uppge en t.o.m. fyra av dessa egenskaper kan du tilldela respektive kant all den stil som border-egenskaperna tillåter:

border-top = border-top-width + border-style + border-color
border-right = border-right-width + border-style + border-color
border-bottom = border-bottom-width + border-style + border-color
border-left = border-left-width + border-style + border-color

P {border-left: thin dotted red}

kommer att visa den vänstra kanten tunn, prickig och röd.

värden: <border-width> | <border-style> | <color> kan tilldelas: alla element
arv: nej

Denna egenskap är en förkortning för border-width, border-style och color och tilldelar hela ramen en stil dvs alla fyra kanter. Regeln {1,4} gäller inte här. Det betyder att du inte kan deklarera olika värden till de fyra kanterna med hjälp av en deklaration. Du kan dock göra det med hjälp av individuella egenskaper.

border = border-top + border-right + border-bottom + border-left

dvs:

border-top-width
+
border-right-width
+
border-bottom-width
+
border-left-width
+
border-style
+
border-color
=
border

värden: <length> | <percentage> | auto (utgångsvärde - auto)
kan tilldelas: alla block- och ersättningselement
arv: nej

Med width menas bredden av föräldraelementet plus margin-left, border-left, padding-left, padding-right, border-right, margin-right.

Med denna egenskap kan du skala elementets bredd, t ex bildens. Ifall bilden inte ryms i föräldraelementet skalas dennes ursprungliga marginaler. För att behålla bildens proportioner bör du även tilldela den egenskapen height med värdet auto. Glöm dock inte att filstorleken inte ändras.

IMG {width: 200px}
IMG {height: auto}

värden: <length> | auto (utgångsvärde - auto)
kan tilldelas: alla block- och ersättningselement
arv: nej

Med height menas höjden på föräldraelementet plus margin-top, border-top, padding-top, padding-bottom, border-bottom, margin-bottom.

Med denna egenskap kan du skala elementets höjd, t ex bildens. Glöm dock inte att filstorleken inte ändras. Om width är lika auto kommer bilden att skalas proportionellt.

IMG {height: 100px}
IMG {width: auto}

värden: left | right | none (utgångsvärde - none)
kan tilldelas: alla element
arv: nej

Med denna egenskap kan du kontrollera textflödet, dvs hur texten (föräldraelement) som innehåller t ex en bild (barnelement) flyter i förhållande till bilden. Se Struktur - format, avsnitt flytande element.

Om värdet är none kommer bilden visas precis på det ställe i texten den befinner sig. Värdet left (vänster) kommer att flytta elementet åt vänster och texten visas då på höger sida av det. Värdet right (höger) flyttar elementet åt höger och texten visas på dess vänstra sida.

IMG {float: left; margin-left: 0}

kommer att placera bilden på vänster sida av texten och behålla förälderns marginal.

värden: none | left | right | both (utgångsvärde - none)
kan tilldelas: alla element
arv: nej

Med denna egenskap kan du specificera på vilken sida av föräldraelementet ett flytande element, t ex en bild är tillåten.

H1 {clear: right}

kommer att placera bilden på höger sida av rubriken.

Upp | CSS-referensbok | Referensböcker