Box modellen:

I CSS bruges box modellen når man snakker om design og layout.

Ethvert HTML element kan ses som en slags boks. Så box modellen kan bruges til alle HTML elementer.

I simpleste udgave fortæller box modellen, at en boks der er defineret med en height på 50px og width på 100px, skal tegnes 50px høj og 100px bred.

Man kan dog tilføje noget til en boks, såsom padding, margin og borders.

  • Margin bruges til at give plads rundt om boksens border, og dermed til at placere HTML elementer i forhold til hinanden. (Angiver den ydre afstand mellem boksens border og det sted hvor andre HTML elementer kan placeres.)
  • Padding bruges til at placere indholdet i boksen i forhold til boksens border. (Angiver den interne afstand mellem indholdet og boksens border.)
  • Borders er en ramme som omkranser boksens indhold og content. Kan synliggøres.