- die Online CSS Referenz
Impressum

Kastenformatierung

margin | padding | border-width | border-color | border-style | border | width | height | overflow | clip | float | clear | position | visibility | z-index

marginzur Übersicht    eins nach unten

margin-top | margin-right | margin-bottom | margin-left

Der äußere Abstand eines Elementes wird mit margin angegeben. Der Abstand kann für jede Seite des Elementes auch einzeln angegeben werden.

margin sollte nicht auf Tabellenreihen und -zellen angewendet werden, dafür ist die Eigenschaft border-spacing zuständig. Bei Inline-Elementen wie <span> werden nur die horizontalen Werte angewendet.

Werte

Der Abstand kannnumerisch absolut oder relativ sein, er kann auch negative Werte beinhalten. Mit margin kann auch eine verkürzte Angabe gemacht werden, dabei sind die Werte im Uhrzeigersinn (top, right, bottom, left) zu notieren. Bei rundherum gleichen Abständen braucht nur ein Wert notiert werden. Bei zwei Werten steht der erste für oben und unten, der zweite für rechts und links. Sind drei Werte notiert, gilt der erste für oben, der dritte für unten und der zweite gleichermaßen für rechts und links.

Standardwert ist 0

Vererbung

Nein

Beispiel

#box01{ margin: 20px 5px 20px 5px;}
#box02{ margin: 0.8em;}

margin

paddingzur Übersichteins nach obeneins nach unten

padding-top | padding-right | padding-bottom | padding-left

padding erstellt den Innenabstand zwischen dem inneren Rand des Elements und dessen Inhalten. Die Abstände können einzeln oder in Kurzform angegeben werden.

Werte

Der Abstand kann numerisch absolut oder relativ sein, er kann auch negative Werte beinhalten. Für verkürzte Angaben gelten die Regeln wie bei margin aufgeführt.

Standardwert ist 0

Vererbung

Nein

Beispiel

#box{ padding: 10px;}

margin

border-widthzur Übersichteins nach obeneins nach unten

border-top-width | border-right-width | border-bottom-width | border-left-width

Wird einem Element ein Rahmen (border) zugewiesen, so gibt die Eigenschaft border-width die Breite des Rahmens an. Es kann jede einzelne Seite des Rahmens formatiert oder die verkürzte Schreibweise genutzt werden.

Werte

thin | medium | thick | [Rahmenbreite numerisch] | inherit

Die numerischen Werte können relativ oder absolut sein, sie dürfen allerdings keinen negativen Wert annehmen. Wird die verkürzte Schreibweise eingesetzt, so gilt auch hier das Prinzip des Uhrzeigersinns (oben, rechts, unten, links).

Standardwert ist medium

Vererbung

Nein

Beispiel

div{ border-width: thick thin 2px 0;}

border-width

border-colorzur Übersichteins nach obeneins nach unten

border-top-color | border-right-color | border-bottom-color | border-left-color

border-color legt die Farbe des Rahmens fest. Mit CSS 2 können auch die einzelnen Seiten des Rahmens formatiert werden. Eine nicht angegebene Rahmenfarbe wird in der, für das Element definierten Vordergrundfarbe gesetzt.

Werte

[Farbe] | inherit

Standardwert ist die Vordergrundfarbe des Elements

Vererbung

Nein

Beispiel

div{
background-color: #f7f7f7;
border-width: thin 4px 4px thin;
border-color: #f0f0f0 #d7d7d7 #d7d7d7 #f0f0f0;
border-style: solid;
}

border-color

Durch Anordnung der Breiten und Auswahl der Rahmenfarbe kann auch eine Art Schlagschatten erstellt werden.

border-stylezur Übersichteins nach obeneins nach unten

border-style legt das Linienart des Rahmens fest. Ab CSS 2 kann auch jede einzelne Seite des Rahmens formatiert werden. Die Darstellung der Linienarten unterscheidet sich von Browser zu Browser.

Werte

none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Standardwert ist none

Vererbung

Nein

Beispiel

div{
background-color: #f7f7f7;
border-width: 3px;
border-color: #000;
border-style: dashed;
}

border-style

borderzur Übersichteins nach obeneins nach unten

border-top | border-right | border-bottom | border-left

border fasst die Rahmeneigenschaften zusammen. Sie können auch für jede Rahmenseite einzeln angegeben werden.

Werte

[Rahmenbreite] | [Rahmenart] | [Rahmenfarbe] | inherit

Standardwerte der jeweiligen Eigenschaften

Vererbung

Nein

Beispiel

div{
background-color: #f7f7f7;
border: 1px solid #000;
}

width

widthzur Übersichteins nach obeneins nach unten

min-width | max-width

Mit width wird die Breite eines Elementes festgelegt. Ab CSS 2 ist es mit den Eigenschaften min-width und max-width möglich die Mindest-, bzw. Maximalbreite des Elementes anzugeben.

Werte

auto | [Breite] | inherit

Die Werte sind numerisch absolut oder relativ anzugeben. Es sind nur positive Werte erlaubt. Mit CSS 2 sind auch Prozentwerte möglich. Diese beziehen sich dann auf das Elternelement.

Standardwert ist auto. Bei min-width und max-width ist es none.

Vererbung

Nein

Beispiel

#box{
width: 40%;
min-width: 120px;
max-width: 300px;
}

width

Dieses Beispiel erzeugt ein Kasten, der 40% des Elternelements einnehmen soll, dabei eine Mindestbreite von 120 Pixel hat und maximal 300 Pixel nicht übersteigen darf. Leider werden diese Eigenschaften nicht vom IE 5 und IE 6 unterstützt.

heightzur Übersichteins nach obeneins nach unten

min-height | max-height

Mit height wird die Höhe eines Elementes festgelegt. Ab CSS 2 ist es mit den Eigenschaften min-height und max-height möglich die Mindest-, bzw. Maximalhöhe des Elementes anzugeben.

Werte

auto | [Höhe] | inherit

Bezüglich der Werte gelten die Ausführungen unter der Eigenschaft width.

Standardwert ist auto. Bei min-height und max-height ist es none.

Vererbung

Nein

Beispiel

#box{
height: 30%;
min-height: 50px;
max-height: 120px;
}

height

overflowzur Übersichteins nach obeneins nach unten

Mit overflow wird angegeben, was mit Inhalten passieren soll, die nicht in den definierten Bereich passen.

Werte

visible | hidden | scroll | auto | inherit

Standardwert ist auto

Vererbung

Nein

Beispiel

#box{
height: 80px;
width: 100px;
overflow: scroll;
}

overflow

clipzur Übersichteins nach obeneins nach unten

Mit Hilfe von clip kann ein Teil des Elementes als Ausschnitt dargestellt werden.

Werte

auto | [Form] | inherit

Derzeit ist als Form nur ein Rechteck erlaubt: rect (oben, recht, unten, links). Mit CSS 2.1 gelten die Werte ausgehend von der oberen linken Ecke des Elements. Die Werte in CSS 2 werden in den jeweiligen Abständen vom Rand angegeben: von oben von der oberen Kante, links von der linken Kante, usw..

Standardwert ist auto

Vererbung

Nein

Beispiel

#box{
height: 120px;
width: 120px;
clip: rect(0px 100px 60px 0px);
}

clip

floatzur Übersichteins nach obeneins nach unten

Ein mit float formatiertes Element gibt an, wie die folgenden Elemente dieses umfliessen. Dies gilt nur für Elemente, die nicht fest positioniert sind.

Werte

left | right | none | inherit

Mit dem Wert left steht das Element links, darauf folgende Elemente werden rechts davon positioniert. Mit dem Wert right umfliessen folgende Elemente das formatierte Element zur linken Seite. none bewirkt, dass folgende Elemente keinem Textfluß folgen und unter dem Element positioniert werden.

Standardwert ist none

Vererbung

Nein

Beispiel

.links{
float: left;
width: 180px;
background-color: #d2d2d2;
}
.rechts{
float: right;
width: 180px;
background-color: #bdc473;
}

float

clearzur Übersichteins nach obeneins nach unten

Das Umfliessen mit float kann mit clear beendet werden. Das mit clear ausgezeichnete Element wird unterhalb des vorangegangenen positioniert.

Werte

left | right | both | none | inherit

Mit dem Wert left wird float:left aufgehoben. Mit dem Wert right wird float:right beendet. both hebt jede float Anweisung auf. Der Wert none bewirkt, dass die float Anweisung fortgeführt wird.

Standardwert ist none

Vererbung

Nein

Beispiel

.links{
float: left;
width: 180px;
background-color: #d2d2d2;
}
.rechts{
clear: left;
}

clear

positionzur Übersichteins nach obeneins nach unten

Legt die Art fest, wie die Positionsangaben angewendet werden sollen. Die Position selbst wird mittels top, right, bottom und left definiert.

Werte

static | absolute | relative | fixed | inherit

static Das Element wird im Textfluß dargestellt, in der Reihenfolge wie es im HTML Dokument definiert wurde. Das Element wird im Browser mitgescrollt. Die Angaben von top, right, bottom und left werden nicht angewendet.
absolute Das Element wird mittels top, right, bottom und left positioniert. Es befindet sich nicht im Textfluß und liegt über den anderen Elementen. Die Position ist relativ zum Elternelement berechnet. Ein absolutes positioniertes Element wird im Browser mitgescrollt.
relative Das relativ positionierte Element wird am vorangehenden Element ausgerichtet. Die Position im normalen Textfluß wird mit den Angaben top, right, bottom und left verschoben. Folgende Elemente folgen wieder dem Textfluß.
fixed Das Element wird an der Stelle fixiert, an das es positioniert wurde. Wird im Browser gescrollt, bleibt dieses Element stehen.

Standardwert ist static

Die Angaben top, right, bottom und left müssen die Angabe position als Voraussetzung haben. Sie legen die Position des Elementes fest. Als Werte sind absolute und prozentuale Angaben, auch negative erlaubt. Der Standardwert ist auto.

Vererbung

Nein

Beispiel

#box{
position: absolute;
top: 20px;
left: 40px;
width: 280px;
height: 180px;
background-color: #d2d2d2;
}
#inbox{
position: absolute;
top: 60px;
left: 40px;
width: 280px;
height: 100px;
background-color: #b8d062;
}

position

visibilityzur Übersichteins nach obeneins nach unten

visibility legt fest, ob ein Element sichtbar oder unsichtbar dargestellt wird. Ist ein Element auf nicht sichtbar eingestellt, so ist es zwar transparent, aber der Platz, den es einnimmt wird bei der Darstellung berücksichtigt.

Werte

visible | hidden | collapse | inherit

Der Wert visible setzt das Element auf sichtbar, hidden auf transparent (unsichtbar). Der Wert collapse sollte nur in Tabellen angewendet werden. Die so ausgezeichnete Tabellenzeile oder -spalte wird nicht angezeigt.

Standardwert ist visible

Vererbung

Ja

Beispiel

p{ visibility: visible;}
p.blind{ visibility: hidden;}

visibility

z-indexzur Übersichteins nach oben    

Liegen mehrere Ebenen (<div>-Bereiche) übereinander, kann mit z-index die Reihenfolge der Ebenen festgelegt werden.

Werte

[numerischer Wert] | auto | inherit

Der Wert auto gibt die Reihenfolge wieder, wie die Elemente im HTML-Dokument definiert sind. Der numerische Wert kann nur eine Ganzzahl sein. Ebenen mit einem höheren z-index liegen über denen mit einem niedrigeren Wert.

Standardwert ist auto

Vererbung

Nein

Beispiel

#box01, #box02, #box03{
position: absolute;
width: 200px;
height: 80px;
}
#box01{
top: 20px;
left: 40px;
background-color: #ccc;
z-index: 1;
}
#box02{
top: 60px;
left: 80px;
background-color: #b8d062;
z-index: 2;
}
#box03{
top: 100px;
left: 120px;
background-color: #b9b679;
z-index: 3;
}

z-index