Box Model

Was bedeutet Box Model?

Das sog. CSS Box Model beschreibt wie Block-Elemente in CSS vom Browser dargestellt werden. Jedes Element hat eine Größe width/height, die von den drei Boxen padding, border und margin umgeben wird. Der vollständige Platzbedarf eines Elements bestimmt sich aus der Summe aller Boxen. Das Box Model kann mit CSS3 manipuliert werden, was insbesondere im Responsive Design enorme Vorteile bietet.

Beispiel

Ein Element mit einer Breite width von 100 Pixeln erhält ein padding von 15 Pixeln und ein margin von 30 Pixeln. Das Element nimmt daher insgesamt 190 Pixel in der Breite ein (30 + 15 + 100 + 15 + 30).

Über die Inhalte dieses Lexikons

Wir möchten die Beiträge unseres Lexikons kurz und verständlich halten. Wenn du detaillierte Informationen zu diesem Thema suchst, nutze am besten diese vorbereitete Google-Suche. Wenn in diesem Beitrag jedoch ein wichtiger Punkt fehlt, die Information veraltet oder gar fehlerhaft ist, freuen wir uns natürlich über deinen Kommentar.