dciwam.de / faq / css / boxmodel

Box-Modell in CSS

Das CSS Box-Modell beschreibt die horizontalen Boxen, die für Elemente generiert werden. Diese Boxen lassen sich per CSS-Deklarationen ansprechen und kontrollieren. Folgende Zeichnung verdeutlicht das Modell:

               top                          MT = margin-top
    +================================+      BT = border-top
    |          MT  margin            |      PT = padding-top
    |  +~~~~~~~~~~~~~~~~~~~~~~~~~~+  |      PB = padding-bottom
    |  |       BT  border         |  |      BB = border-bottom
    |  |  +--------------------+  |  |      MB = margin-bottom
    |  |  |    PT  padding     |  |  |      ML = margin-left
    |  |  |  +..............+  |  |  |      BL = border-left
left|ML|BL|PL|     content  |PR|BR|MR|right PL = padding-left
    |  |  |  +..............+  |  |  |      PR = padding-right
    |  |  |    PB              |  |  |      BR = border-right
    |  |  +--------------------+  |  |      MR = marginright
    |  |       BB                 |  |
    |  +~~~~~~~~~~~~~~~~~~~~~~~~~~+  |      = margin-Rand
    |          MB                    |      ~ border-Rand
    +================================+      - padding-Rand
               bottom                       . content-Rand

Weitere Erläuterungen sind in der CSS2-Spezifikation im Kapitel 8 Box Model zu finden.

Michael Jendryschik • http://jendryschik.de
Dominik Boecker • dominik.boecker@gmx.de

Zum Seitenanfang