Faq-O-Matic für de.comm.infosystems.www.authoring.misc

dciwam-FAQ, häufig gestellte Fragen

Fragen zum Verständnis einzelner Webauthoring-Sprachen

CSS, Cascading Style Sheets

Was versteht man unter dem "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