The CSS Box Model

Total width = left margin + left border + left padding + width +
right padding + right border + right margin

Total height = top margin + top border + top padding + height +
bottom padding + bottom border + bottom margin

W3C
CSS “tegner” dokumentet som et hierarki av bokser når en side lastes på skjerm eller for print.
Disse boksene inneholder ord, linjer, paragrafer, tabeller med properties som size, color eller font.

Hver boks har et “content area”.
“Content edge” omslutter “content area”.
“Padding area” omslutter “content area”.
“Padding edge” omslutter “padding area”.
“Border area” omslutter “padding edge”.
“Border area” omslutter “padding edge”.
“Border edge” omslutter “border area”.
“Margin area” omslutter “border edge”.
“Margin edge” omslutter “margin area”.

NB: MARGIN (til forskjell fra padding & border) kan ha negativ verdi!

DISPLAY:
inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | <template>| none
(None propertie genererer ingen boks i det hele tatt. Lager altså ingen “usynlig boks”, rett og slett ingen boks i det hele tatt.)
Block-level box: block | list-item | table | template
Inline-level box: inline | inline-block | inline-table | ruby
Et element må være et block element for å sette float, eller overflow

VISIBILETY
visible | hidden |collapse
Visible: den genererte boksen er synlig
Hidden: den genererte boksen er usynlig, men påvirker fortsatt layout (fullverdig transperent).
Collapse: se tabell modul. Dersom benyttet på andre moduler enn rows,  columns, har collapse samme betydning som hidden.

BREDDE/HØYDE
“lengde” | “prosent” | auto

MIN-WIDTH/MAX-WIDTH/MIN-HEIGHT/MAX-HEIGHT
Loremipsum

FLOAT
left | right | none
Denne properties spesifiserer om et element skal flyte til høyre, venstre eller ikke i det hele tatt. Det kan settes for alle elementer, men påvirker kun elementer som ikke er angitt med position:absolute.

http://www.w3.org/TR/css3-box/

~ av rodsethol den mai 15, 2009.