Tutorial: CSS Abstände padding, margin

Tutorial: CSS Abstände
In diesem Tutorial werde ich ihnen kurz erklären wie man Abstände,
häufig auch Polsterung genannt, zwischen Inhalt und Rahmen einer Box festlegen kann.

CSS Innenabstände
Für Innenabstände im Rahmen oder in einer Box verwendet man in CSS den Code padding. Padding bedeutet Innenabstand,
den können Sie durch eine Längenangabe oder Prozentangabe festlegen.

Erklärung Längenangabe
px Längen- und Breitenangabe relativ zur Bildschirmauflösung. 1px = 1 Pixel border-width:5px;

Erklärung Prozentangabe
Längen- und Breitenangabe relativ zur Normalgröße von Elementen, bzw. zur Fenstergröße. width:80%;

Der Innenabstand unterscheidet sich in vier verschiedene Richtungen:
padding-bottom Innenabstand nach unten
padding-left Innenabstand nach links
padding-right Innenabstand nach rechts
padding-top Innenabstand nach oben

Im CSS Code würde das wie folgt aussehen:

Innenabstand in der Tabelle mit padding

border, legt die Ränder breite fest

CSS Außenabstände
Außenabstände werden zwischen dem Rand eines Elements (der Box) und anderen Elementen,
bzw. dem übergeordneten Element. Außenabstände sind immer transparent.
Der Abstand wirkt sich also nicht auf die Hintergrundfarbe aus.
Es gibt auch hier die zwei Wege, wie oben genannt, einem Element den gewünschten Abstand zuzuweisen.

Auch hier kann man für alle vier Seiten verschiedene Angaben machen
margin-bottom Außenabstand unten
margin-left Außenabstand links
margin-right Außenabstand rechts
margin-top Außenabstand oben

Besonders bei margin ist das man den Wert auf auto setzen kann. Auto weist den Browser an, den Wert automatisch zu berechnen.
Das heißt, wenn man zum Beispiel margin: 0 auto; verwendet, wird das Element horizontal zentriert.

Im CSS Code würde das wie folgt aussehen:

Ich hoffe ich kann mit diesem Tutorial vielen weiterhelfen
Mfg Yevgen
______________
.:!!! Denk Immer Positiv !!!:.

Kleine Ergänzung:

Man kann alle Abstände auch einzeln definieren und dafür trotzdem
nur einen CSS Tag verwenden. Dafür muss man padding oder margin
durch 4 Werte ergänzen, das sieht dann so aus:

Nun muss man wissen, welcher Wert zu welchem Abstand gehört.
Dafür habe ich mal ein Farben hinterlegtes Beispiel gemacht:

Rot: Abstand von oben
Grün: Abstand von rechts
Blau: Abstand von unten
Violett: Abstand von links

Diese Werte lassen sich auf den Innenabstand (padding) übertragen,
es sind auch dort die Folgenden:

Rot: Innenabstand von oben
Grün: Innenabstand von rechts
Blau: Innenabstand von unten
Violett: Ínnenabstand von links

So spricht man jeden Wert einzeln, in einer Zeile an. Mit dieser
Methode kann man auch noch einiges an Platz sparen, wenn man
viele unterschiedliche Werte verwenden will. Für gleiche Werte bei
allen 4, benutzt man am besten wie oben gezeigt:

Bei dieser Methode spricht dieser eine Wert alle Werte gleichzeitig an,
wodurch alle Werte automatisch gleich sind.