Code:
Kästchen 1: margin: 20px;
Kästchen 2: margin: 20px 10px 20px 20px;
Kästchen 3: margin: 20px 0px;
In diesem Beispiel gibt es drei gleich große Kästchen mit einer Fläche von 100 x 100 Pixel. Das blaue Kästchen als Ausgangsbasis hat eine Entstellung von margin:20px, also 20 Pixel Rand in alle vier Richtungen. Das erste rote Kästchen hat hingegen eine Einstellung von margin: 20px 10px 20px 20px, also rechts nur 10 Pixel, sonst auch 20 Pixel Abstand, daher gibt es einen sehr großen Abstand zum blauen Kästchen, weil es nun 40 Pixel Abstand gibt.
Das zweite rote und insgesamt dritte Kästchen hat mit margin 20px 0px keine weiteren seitlichen Abstand. Die 20 Pixel regeln nur den Abstand oben und unten. Daher ist der Abstand zum linken Nachbar nur 10 Pixel breit und viel schmäler als der andere Abstand.
Mit dem Beispiel kann man gut ablesen, dass man mit margin verschiedene Lösungen anstreben kann, wie zum Beispiel schmälere Abstände zwischen Bildern, aber größeren zum Rand der Seite hin oder geringerer Abstand zwischen der Hauptüberschrift und dem eigentlichen Text, aber mehr Abstand zwischen dem Text und den Elementen darunter.
Wenn man einen kompletten Text gestaltet, braucht man nur die Außengrenzen und vielleicht auch mit padding mehr Abstand vom Text zum Rand. Arbeitet man aber mit Bildergalerien und zum Beispiel kleinen Vorschaubildern, dann kann man mit verschiedenen Abständen für optische Reize sorgen. Und dann muss man wissen, wie die Einstellungen mit den Himmelsrichtungen funktionieren.
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.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
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: Praktisches CSS-Beispiel für margin für die Abstände
Beschreibung: Praktisches Beispiel für die 👍 Abstandseinstellungen durch margin, wodurch Elemente ✅ verschieden weit voneinander angeordnet werden können.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel