Praktisches CSS-Beispiel für Unterschied margin - padding

Abstände innerhalb und außerhalb festlegen

Fläche 250 x 250

CSS-Code:
margin: 20px;
Fläche 250 x 250

CSS-Code:
margin: 20px;
padding: 10px;

Abstände innerhalb und außerhalb eines Elements

In diesem Beispiel gibt es zwei gleich große Flächen mit 250 x 250 Pixel, die jeweils den äußeren Abstand mit margin: 20px; eingestellt haben. Das heißt, dass nach allen vier Richtungen 20 Pixel Abstand vorgesehen ist. Das zweite Kästchen hat aber zusätzlich mit padding: 10px; den inneren Abstand definiert, das erste Kästchen nicht.

Damit kann man sehr gut den Unterschied feststellen, mit dem Webdesigner immer wieder große Mühe haben. Margin kümmert sich um die Außengrenze und distanziert ein Element gemäß dieser Einstellung. Aber am ersten Kästchen kann man erkennen, dass der Text direkt an der Seitenkante der Fläche beginnt. Im Gegensatz dazu gibt es im zweiten Kästchen einen angenehmen Abstand zum Rand - den hat die Einstellung padding vorgenommen.

Padding ist zum Beispiel in Formularzellen und Formularzellen gefragt, wenn man gefälligere Tabellen erstellen möchte und etwas Abstand zwischen Test und Rand haben möchte. Auch bei Elemente mit Hintergrundfarbe wie im Beispiel oder Hintergrundgrafiken macht es Sinn, padding einzusetzen. Wenn die ganze Seite weiß ist, macht es weniger Sinn, wenn man ohnehin keinen Effekt erzielen kann, das hängt aber von der Situation ab.

Lesen Sie auch

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.

Diesen Artikel teilen

Kategorien

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

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