Zu der Positionierung der Inhalte auf der Webseite 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 genutzt wird.
Neben der Himmelsrichtungen braucht es auch ein Verständnis für das Boxmodell und den Unterschied zwischen außen und innen. Margin kann genutzt werden, um die Außenabstände festlegen zu können, während padding für die Innenabstände zuständig ist, etwa den Abstand von Text zum Rahmen des Textbereiches.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
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;
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
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).
Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.
Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.
Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.
Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.
Themenseiten
Artikel-Thema: Abstände mit CSS auf der Webseite einstellen
Beschreibung: Die 👍 Abstände sind eine große Herausforderung im Layout einer ✅ Webseite, können aber mit CSS samt margin und padding recht einfach realisiert werden.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel