Globale linker

CSS

Box egenskaper

CSS spesifikasjonen kommer med et sett egenskaper som kalles box properties, som brukes til å angi marger, kantstrek, osv.... De forskjellige typene er:

Margin egenskaper som legger til en gjennomsiktig marg rundt hele objektet. Ytre marg.
Border egenskaper som kan vise kantlinjer, i flere forskjellige former, rundt et element
Padding egenskaper som legger til ekstra luft rundt et element, innenfor kantlinjen hvis det finnes. Avstand fra kantlinje til innhold, eller indre marg. Negative verdier er ikke tillatt.
Size egenskaper, med width og height kan du bestemme størrelsen på et element.
Positioning egenskapene, float og clear, kontrollerer posisjonen til elementet relativt til nærliggende elementer.

Box-model

: Box model

Box-modellen kan være vanskelig å forstå. Det syns iallefall Microsoft, som tidligere har mistolket den, slik at IE5 og tidligere viser den feil.

Skal du regne ut et elements totale bredde skal du legge sammen:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.

: Microsoft Internet Explorer 5 box model

For IE 5 må du regne: margin-left + width + margin-right. Og Width er her inklusive padding og border.

For at IE 6 skal oppføre seg i henhold til standarden må du deklarere hva slags HTML-du bruker på siden med <!DOCTYPE>-taggen i begynnelsen av dokumentet. Hvis ikke vil IE 6 også oppføre seg som IE5 med hensyn til box-model.

Les mer om «The Doctype-switch» hos Microsoft.

margin

Som default er bredden på margene rundt et element lik 0. For å legge til en marg på en eller flere sider kan du bruke en av følgende:

margin-top
margin-right
margin-bottom
margin-left

p {margin-left:10px}

Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt, % eller auto som er default.

Du kan også bruke en samlemåte hvor du angir margen for alle fire kanter. Rekkefølgen er top, right, bottom, og left

p {margin: 10px 10px 10px 10px}

Marger kollapser. Hvis du har for mye, eller for lite luft på siden din, har det kanskje noe med marger å gjøre. Les mer hos Andy Budd om marger

border

Følgende egenskaper kan brukes til å tegne en kantlinje rundt et element:

border-width angir bredden på kantlinjen. Kan ha verdiene thin, medium, thick eller en av ex, em, px, cm, mm, pc, in, pt eller %
border-style kan ha verdiene:
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset
- none
border-color angir fargen på kantlinjen.

p {border-width: 5px; border-style: solid; border-color:red}

Her kan man også bruke et samlebegrep med rekkefølgen: width, style, color

p {border: 5px solid red}

padding

Med padding-properties setter man avstand fra elementets kant til innholdet, eller indre marg:

padding-top
padding-right
padding-bottom
padding-left

Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt, % eller auto som er default.

p {padding-top:2em}

Også her kan man bruke samlemåten, med rekkefølgen top, right, bottom, left.

p {padding: 2px 1px 3px 5px}

size

Size-properties bestemmer høyde og bredde på et element.

width bestemmer bredden
height bestemmer høyden

Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt, % eller auto som er default.

Husk at total høyde og bredde for et element inluderer margin. border, padding og width/height.

positioning

Du kan bruke posisjoneringsegenskapene float eller clear til å kontrollere et elements posisjon i forhold til nærliggende elementer, ganske likt align for <img>-taggen i HTML og clear attributtet til <br>-taggen.

float kan ha verdiene left, right og none (default). Bestemmer hvordan elementet skal flyte i forhold til nærliggende elementer. Velger du right, vil teksten (eller andre elementer) flyte til venstre for elementet. Velger du left, vil nærliggende elementer flyte til venstre. Ganske likt align for <img>-taggen i HTML.
Float kan oppføre seg noe merkelig noen ganger, les Eric Meyers forklaring
clear kan ha verdiene left, right, both og none (default). Ganske likt clear-attributtet til <br>-taggen, dvs. hvis et tidligere element har float og man vil under det elementet som har float, bruker man clear:
- Med clear:left vil elementet bli vist under foregående element med float:left egenskapen, i stedet for til høyre.
- Med clear:right vil elementet bli vist under foregående element med float:right egenskapen, i stedet for til venstre.
- Med clear:both vil elementet bli vist under foregående element med float:right eller float:left egenskapen, i stedet for en av sidene.
- Med clear:none vil elementet bli vist ved siden av et foregående element med float-egenskapen.

Gå til neste side hvor vi ser på bakgrunns-egenskaper.