Praktisches CSS-Beispiel für Abstände mit margin

Individuelle Einstellungen möglich

 

Code:
Zeile 1: margin: 20px;
Zeile 2: margin: 0px;

Abstände von Elemente und Flächen in CSS einstellen

Hier wurden zwei Zeilen angelegt. In beiden Fällen sind die Flächen 150 x 150 Pixel groß. Die beiden Beispiele zeigen sehr einfach die Wirkung der margin-Einstellung. Die beiden Flächen haben jeweils die gleiche Größe, aber im ersten Fall hat man eine Abgrenzung von 20 Pixel gewählt, in der zweiten Reihe hat man hingegen den Rand auf 0 Pixel eingestellt. Es zeigt sich, dass im ersten Beispiel generell 20 Pixel Abstand bestehen - nach oben, rechts, unten und auch links.

Man hätte auch margin: 20px 0px schreiben können für oben und unten 20 Pixel Abstand, keinen Abstand links und rechts - oder umgekehrt, abhängig davon, auf welcher Seite der Abstand gewünscht ist.

Im aktuellen Fall wurde der Abstand zwischen Flächen vorgenommen, doch diese Lösung gibt es auch bei Überschriften, Absätzen im Text und vielen anderen Situationen der Formatierung auf Webseiten.

Lesen Sie auch

---

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

---

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.

• Positionsarten
• Beispiel: Position absolut
• Beispiel: Position relativ
• Beispiel: Position fix

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.

• Float
• Beispiel: Position float

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.

• Abstandsangaben
• Beispiel: Abstand margin
• Beispiel: Abstand margin2
• Beispiel: Abstand margin / padding

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.

• Breite-Höhe
• Beispiel: Breite/Höhe
• Schichten / Ebenen
• Beispiel: z-index

Themenseiten

Diesen Artikel teilen

• 
• 
• 
• 
• 

Infos zum Artikel

Artikel-Thema: Praktisches CSS-Beispiel für Abstände mit margin
Beschreibung: Praktisches Beispiel in 👍 CSS für die Positionierung auf Basis der ✅ Abstandsangaben mit der Einstellung margin und seinen Möglichkeiten.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel