CSS - Elemente - Abstände
1. Außenabstand
Der Außenabstand definiert sich als Leeraum zwischen dem aktuellen Element und dem übergeordneten Elternelement bzw. dem vorherigen oder nachfolgendem Element.
Dieser Abstand wird mit der margin-Eigenschaft erzeugt. Diese unterteilt sich in vier Bereiche:
margin-topmargin-rightmargin-bottommargin-left
Bei der Zuweisung der Werte sind numerische Angaben sowie auto und inherit erlaubt. Die CSS-Anweisung für
das oben aufgeführte Beispiel könnte z.B. so aussehen:
p
{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
In diesem Fall hat das <p>-Element jeweils einen Abstand von 10 Pixeln sowohl zum übergeordneten
<div>-Element als auch zum nachfolgenden <table>-Element. Gottlob gibt es auch noch eine
kürzere Schreibweise. In unserem Fall sähe die so aus:
p
{
margin: 10px;
}
Macht man beim margin nur eine Angabe, so bezieht sich die auf alle vier Ränder des Elements. Bei zwei Angaben bedeutet
die erste Abstand nach oben und unten, die zweite Abstand nach rechts und links. Machen wir vier Angaben, so gilt die
am Anfang beschriebene Reihenfolge: oben, rechts, unten, links, also z.B.
p
{
margin: 10px 8px 4px 12px;
}
Leider haben manche Leute Probleme damit, so wie meine Wenigkeit. Also immer an den Uhrzeigersinn denken! Da fängt der Zeiger oben an und läuft dann rechts herum.
2. Innenabstand
Logischerweise ist der Innenabstand das genaue Gegenteil des Außenabstandes, also der Leeraum, den Kind-Elemente oder entsprechende Inhalte zum aktuellen Element einnehmen.
Dieser Abstand wird mit der padding-Eigenschaft erzeugt. Ansonsten ist alles genau so wie beim margin,
also padding-top, padding-right, padding und schlagmichtot.