Kastenformatierung
margin | padding | border-width | border-color | border-style | border | width | height | overflow | clip | float | clear | position | visibility | z-index
marginzur Übersicht 
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;}
paddingzur Übersicht
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;}
border-widthzur Übersicht
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-colorzur Übersicht
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;
}
Durch Anordnung der Breiten und Auswahl der Rahmenfarbe kann auch eine Art Schlagschatten erstellt werden.
border-stylezur Übersicht
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;
}
borderzur Übersicht
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;
}
widthzur Übersicht
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;
}
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 Übersicht
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;
}
overflowzur Übersicht
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;
}
clipzur Übersicht
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);
}
floatzur Übersicht
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;
}
clearzur Übersicht
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;
}
positionzur Übersicht
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;
}
visibilityzur Übersicht
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;}
z-indexzur Übersicht
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;
}
