CSS Boxmodell: Innen, Außen & Dimensionen

Das Boxmodell: Mit CSS können Sie Elementen (feste) Breiten, Höhen und Abstände geben und diese nebeneinander positionieren.

Das CSS-Boxmodell ist ein grundlegendes Konzept in der Webentwicklung, das die Darstellung und das Layout von HTML-Elementen beschreibt. Es behandelt jedes HTML-Element als eine rechteckige Box, die aus mehreren Schichten besteht:

1. Inhalt (Content): Dies ist der tatsächliche Text, die Bilder oder andere Elemente, die innerhalb des HTML-Elements platziert sind. Die Größe dieses Bereichs wird durch die Eigenschaften „width“ und „height“ gesteuert.
2. Padding: Das Padding ist der Raum zwischen dem Inhalt und dem inneren Rand der Box. Es dient dazu, den Inhalt von den Rändern zu trennen. Sie können das Padding mit den Eigenschaften „padding-top“, „padding-right“, „padding-bottom“ und „padding-left“ anpassen.
3. Border: Der Border ist eine Linie oder ein Rahmen, die die äußere Kante der Box umgibt. Sie können die Dicke, den Stil und die Farbe des Rahmens mit den Eigenschaften „border-width“, „border-style“ und „border-color“ steuern.
4. Margin: Der Margin ist der Raum zwischen der äußeren Kante der Box und anderen Elementen auf der Webseite. Er sorgt für Abstand zwischen den Boxen. Die Größe des Margins wird mit den Eigenschaften „margin-top“, „margin-right“, „margin-bottom“ und „margin-left“ festgelegt.

Die Gesamtbreite und Höhe eines HTML-Elements werden durch die Summe von Inhalt, Padding, Border und Margin bestimmt. Das Boxmodell ermöglicht es Entwicklern, das Layout von Webseiten genau zu kontrollieren, indem sie diese Eigenschaften gezielt anpassen.

Das Boxmodell ist ein grundlegendes Konzept in der Webentwicklung und spielt eine entscheidende Rolle bei der Gestaltung von Webseiten und der Positionierung von Inhalten.

Die rechteckigen Blöcke, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden, folgen einem Schema, dem „Boxmodell“. Es ist somit Grundlage jeden Layouts.

Jedes Block-Element wie Textabsätze (p), -Abschnitte (div, article, main, aside, …) und Überschriften (h1, h2, …) bildet eine rechteckige Box, die Sie frei formatieren können.

Beispiel:

overflow-x, overflow-y

Mit overflow-x und overflow-y kann der „Überlauf“ eines Elementes(overflow) für jede Richtung einzeln eingestellt werden (also ob z.B. ein Scrollbalken angezeigt werden soll).

box-sizing

Mittels box-sizing kann eingestellt werden ob sich die Breite eines Elementes auf deren Inhalt oder auf Inhalt+Rahmen+padding bezieht. (Webkit: -webkit-box-sizing)

calc()

Die Eigenschaft calc(), die z.B. innerhalb einer CSS-Eingeschaft wie width oder height stehen kann, ist es möglich Breiten- und Längenangaben direkt auszurechnen.