Sie sind hier: Startseite -> CSS-Grundlagen -> Positionierung -> Abstandsangaben

CSS-Grundlagen: Abstandsangaben

CSS-Richtungsangaben: Abstände und Aussehen

Zu der Positionierung ist auch die wichtige Funktion der Abstände zu zählen. Alleine durch eine Vergrößerung oder Reduzierung des Abstandes zwischen zwei Elementen kann das Layout einer Webseite stark beeinflusst werden. In diesem Zusammenhang ist das Konzept der Himmelsrichtungen wesentlich, das auch über die Positionierung hinaus genützt wird.

CSS kennt die vier Hauptrichtungen oben, rechts, unten und links in genau dieser Reihenfolge. Das bedeutet, dass

margin: 20px 20px 0px 0px;

bedeutet, dass oben und rechts 20 Pixel Abstand zu halten sind, unten und links hingegen kein Abstand erfolgen soll. Abhängig von der Programmierung und Gestaltung kann diese Angabe vor allem zwischen zwei Absätzen, Ebenen oder auch Tabellen möglich sein. Das Prinzip der Himmelsrichtungen findet sich in vielen Bereichen.

margin: 20px 20px 0px 0px;
padding: 5px 10px 15px 20px;
p: 20px 0px 0px 20px;

Im ersten Fall haben wir wieder den Abstand wie oben. Im zweiten Fall wird der innere Abstand geregelt, wobei die gleiche Reihenfolge gilt: oben (5), rechts (10), unten (15) und links (20) Pixel Abstand. Die letzte Zeile ist ein Beispiel für einen Abstand, der mit den vier Werten ausgestattet wurde.

Es gibt zwei Abkürzungen bei den CSS-Angaben:

margin: 0;
margin: 0px;
margin: 0px 10px;

Die erste Zeile und die zweite sind ident und beziehen sich auf alle vier Himmelsrichtungen und reduzieren den Abstand auf 0 Pixel. Im dritten Beispiel wird für oben und unten 0 Pixel festgelegt (erster Wert) und für links und rechts 10 Pixel (zweiter Wert).

Übersicht der Unterseiten

Beispiel: margin

Informationen über ein praktisches CSS-Beispiel für die Abstände in CSS mit margin.

Beispiel: margin2

Informationen über ein praktisches CSS-Beispiel für die Abstände in CSS mit margin.

Beispiel: padding

Informationen über ein praktisches CSS-Beispiel für die Abstände in CSS mit margin und padding.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Positionierung

Startseite CSS-Grundlagen