Erklärung:
Verändert die Höhe eines Elements.

Werte:
Beliebige Zahl plus Größenangabe. Standard ist auto.

Beispiel:

H1 {
   height: 200px;
}

Zu beachten:
Besonders geeignet zur Verwendung bei IMG und divs. Definiert man die Breite nicht bleibt sie auf auto und richtet sich nach dem Inhalt.

Erklärung:
Verändert die Breite eines Elements.

Werte:
Beliebige Zahl plus Größenangabe. Standard ist auto.

Beispiel:

H1 {
   width: 200px;
}

Zu beachten:
Besonders geeignet zur Verwendung bei IMG und divs. Definiert man die Breite nicht bleibt sie auf auto und richtet sich nach dem Inhalt.

Erklärung:
Verändert die Anzeigeart des Elements

Werte:

• block: Macht aus dem Element ein block-level-element (falls es das nicht schon ist). Sie können jetzt auch em mit text-align ausrichten
• inline: Macht aus dem Element ein inline-element
• list-item: Formatiert das Element wie li (Allerdings, wer braucht das wirklich?)
• none: Das Element wird nicht angezeigt

Beispiel:

em.center {
    display: block;
    text-align: center;
}

Erklärung:
Das Element, das man mit dieser Eigenschaft belegt setzt sich an den rechten (bzw. linken) Rand. Alle Elemente, die danach kommen "fließen" links (bzw. rechts) an ihm vorbei anstatt nach dem Element ganz Links anzusetzen

Werte:

• none: Das Element wird dort eingesetzt, wo es auch im Dokument steht
• left: Element bleibt links. Alles danach geht rechts vorbei
• right: Element bleibt rechts. Alles danach geht links vorbei

Beispiel:

<img src="bilder.png" width="10" height="20" style="float: right;">
<p>Text, der links vorbeifließt.</p>

Erklärung:
Verhindert, dass ein anderes Element links oder rechts von ihm vorbeifloatet.

Werte:

• left: Verhindert, dass sich weitere Element links von ihm platztieren
• right: Verhindet, dass sich weitere Element rechts von ihm platztieren
• both: Weder links noch rechts wird ein Element floaten

Beispiel:

<div style="width: 200px; height: 200px; border: 1px solid #000;
float: right;">div1</div>
<div style="width: 200px; height: 200px; border: 1px solid #000;">
div2</div>
<div style="width: 200px; height: 200px; border: 1px solid #000;
float: right;">div3</div>
<div style="width: 200px; height: 200px; border: 1px solid #000;
clear: right;">div4</div>

Erklärung:
Verändert den Abstand des Elements nach oben. Siehe box-model

Werte:
Beliebige Zahl plus Größenangabe.

Beispiel:

H1 {
   margin-top: 10px;
}

Erklärung:
Verändert den Abstand des Elements nach rechts. Siehe box-model

Werte:
Beliebige Zahl plus Größenangabe.

Beispiel:

H1 {
   margin-right: 10px;
}

Zu beachten:
padding kann nicht negativ sein.

Erklärung:
Verändert den Abstand des Elements nach unten. Siehe box-model

Werte:
Beliebige Zahl plus Größenangabe.

Beispiel:

H1 {
   margin-bottom: 10px;
}

Erklärung:
Verändert den Abstand des Elements nach links. Siehe box-model

Werte:
Beliebige Zahl plus Größenangabe.

Beispiel:

H1 {
   margin-left: 10px;
}

Erklärung:
Shorthand für margin-top, margin-right, margin-bottom und margin-left. Siehe box-model.

Werte:

• margin: 10px Abstand zu jeder Seite
• margin: 10px 20px Abstand von 10px von Oben und Unten, Abstand von 20px von Rechts und Links
• margin: 10px 15px 20px 10px von Oben, 15px von Rechts, 20px von Unten, 15px von Links
• margin: 10px 15px 20px 25px Uhrzeigersinn: 10 von Oben, 15 von Rechts, 20 von Unten, 25 von Links

Beliebige Zahl plus Größenangabe.

Beispiel:

H1 {
   margin: 5px 0px 20px 50px;
}

Erklärung:
Definiert den Abstand (die "Polsterung" engl. padding) des Inhalts zum oberen Rand des Elements selbst.

Werte:
Beliebige Zahl plus Größenangabe. Die prozentuale Angabe bezieht sich auf die Breite den übergeordneten Elements.

Beispiel:

<div style="position: absolute; top: 50px; left: 100px; width: 100px; height: 200px;
background-color: #ff0; border: solid 1px black; padding-top: 20px;">

<p style="background-color: #d0d0d0;">all your base are belong to us</p>

</div>

Zu beachten:
padding kann nicht negativ sein.

Erklärung:
Definiert den Abstand (die "Polsterung" engl. padding) des Inhalts zum rechten Rand des Elements selbst.

Werte:
Beliebige Zahl plus Größenangabe. Die prozentuale Angabe bezieht sich auf die Breite den übergeordneten Elements.

Beispiel:

<div style="position: absolute; top: 50px; left: 100px; width: 100px; height: 200px;
background-color: #ff0; border: solid 1px black; padding-right: 20px;">

<p style="background-color: #d0d0d0;">all your base are belong to us</p>

</div>

Zu beachten:
padding kann nicht negativ sein.

Erklärung:
Definiert den Abstand (die "Polsterung" engl. padding) des Inhalts zum unteren Rand des Elements selbst.

Werte:
Beliebige Zahl plus Größenangabe. Die prozentuale Angabe bezieht sich auf die Breite den übergeordneten Elements.

Beispiel:

<div style="position: absolute; top: 50px; left: 100px; width: 100px; height: 200px;
background-color: #ff0; border: solid 1px black; padding-bottom: 20px;">

<p style="background-color: #d0d0d0;">all your base are belong to us</p>

</div>

Zu beachten:
padding kann nicht negativ sein.

Erklärung:
Definiert den Abstand (die "Polsterung" engl. padding) des Inhalts zum linken Rand des Elements selbst.

Werte:
Beliebige Zahl plus Größenangabe. Die prozentuale Angabe bezieht sich auf die Breite den übergeordneten Elements.

Beispiel:

<div style="position: absolute; top: 50px; left: 100px; width: 100px; height: 200px;
background-color: #ff0; border: solid 1px black; padding-left: 20px;">

<p style="background-color: #d0d0d0;">all your base are belong to us</p>

</div>

Zu beachten:
padding kann nicht negativ sein.

Erklärung:
Definiert den Abstand (die "Polsterung" engl. padding) des Inhalts zum Rand des Elements selbst. Shorthand für padding-top, padding-right, padding-bottom und padding-left.

Werte:
Beliebige Zahl plus Größenangabe. Die prozentuale Angabe bezieht sich auf die Breite den übergeordneten Elements.

• eine Angabe: alle vier Seiten nehmen sie an
• zwei Angaben: oben und unten nehmen die erste Angabe an, links und rechts die Zweite
• drei Angaben: erste Angabe für oben, zweite Angabe für rechts und links, dritte Angabe für unten
• vier Angaben: erste Angabe für oben, zweite Angabe für rechts, dritte Angabe für unten, vierte Angabe für links

Beispiel:
Entfernung zum Rand für oben, rechts, unten, links

padding: 10px;                /* 10px 10px 10px 10px */
padding: 10px 20px;           /* 10px 20px 10px 20px */
padding: 10px 20px 30px;      /* 10px 20px 30px 20px */
padding: 10px 20px 30px 40px; /* 10px 20px 30px 40px */

Zu beachten:
padding kann nicht negativ sein.