Veit Schiele Communications

Veit Schiele Communications

Boxen-Modell

erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:10 © Veit Schiele Communications GmbH, 2007–2017

Eigenschaften

Das Box-Modell von CSS beschreibt die rechteckigen Kästen, die für die Elemente eines Dokumentbaums erzeugt werden. Jede Box hat einen Inhaltsbereich (content) (z.B. Text, ein Bild usw.) und optional Polsterung (padding), Rahmen (border) sowie Randbereiche (margin). Die folgende Zeichnung zeigt, in welchem Zusammenhang diese Bereiche stehen:

Boxen-Modell

Rand, Rahmen und Polsterung können in linke (left), rechte (right), obere (top) und untere (bottom) Segmente unterteilt werden.

Die Breite und Höhe des Inhalts einer Box sind von mehreren Faktoren abhängig:

  • ob für das Element, das die Box erzeugt, die Eigenschaften width oder height gesetzt sind,
  • ob die Box Text oder andere Boxen enthält,
  • ob es sich bei der Box um eine Tabelle handelt
  • usw.

Die Breite einer Box ist die Summe der linken und rechten Ränder, Rahmen und Polsterung sowie der Inhaltsbreite. Die Höhe ergibt sich aus den unteren und oberen Rändern, Rahmen und Polsterung sowie der Inhaltshöhe.

Der Hintergrundstil von Inhalt, Polsterung und Rahmen einer Box wird durch die Eigenschaft 'background' des erzeugenden Elements bestimmt. Ränder ('margin') sind immer transparent.

Beispiele:

#portal-logo {
    margin: 26px 0 16px 1.3em;
    border: 0;
    background: url(http://www.veit-schiele.de/logo.gif) no-repeat;
    padding: 0;
}
h1 {
    margin: 0;
    padding-top: 0.5em;
    background-color: transparent;
    border-bottom: 1px solid #9e9e9e;
}

Rand (margin)

Die Randbreite kann als fester Wert, als Prozentsatz der Breite des umschließenden Blocks oder als automatischer WErt angegeben werden. Negative Werte sind erlaubt, es kann jedoch von der jeweiligen Implementierung abhängige Obergrenzen geben.

Rahmen (border)

Da sich border-top, border-right, border-bottom und border-left überlappen können, ist die Reihenfolge von Bedeutung, in der die Regeln angegeben werden.

Zusammenfallende Rahmen

Dabei fallen benachbarte Rahmen von zwei oder mehr Boxen (die nebeneinander liegen oder verschachtelt sein können und durch keine Polsterungs- oder Rahmenbereiche voneinander getrennt sind) so zusammen, dass sie einen einzigen Rand bilden.

Rahmenstil (border-style)

none
Kein Rahmen. Die Rahmenbreite ist gleich 0
hidden (versteckt)
Wie none, außer in Hinblick auf Rahmenkonfliktauflösung für Tabellenelemente;
dotted
Punktierte Linie;
dashed
Gestrichelte Linie;
solid
Durchgezogene Linie;
double
Zwei durchgezogene Linien. Die Summe der beiden Linien und der Abstand zwischen ihnen ist gleich dem Wert von border-width.
groove
Der Rahmen sieht wie eine Rille aus;
ridge
Der Rahmen sieht wie ein Grat aus;
inset
Der Rahmen sieht wie eingebettet aus;
outset
Die Box sieht so aus, als käme sie aus der Zeichenfläche heraus.