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.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
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.
Aber immer dann, wenn man einen Rand sehr gut erkennen kann, schaut es übel aus, wenn die Darstellung so gewählt ist wie im ersten Beispiel. Dann klebt der Text am Rand und ist schwerer lesbar. Sobald mit unterschiedlichen Farben gearbeitet wird, muss man sich überlegen, ob man nicht mit padding für mehr Abstand sorgt.
Padding ist auch für das Marketing interessant. Mit padding kann man etwa etwas mehr Abstand herstellen, ehe eine Schaltfläche (ein Button) für eine Kaufhandlung angezeigt wird, weil dieser dadurch hervorgehoben werden kann.
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 bei Alfahosting - jetzt gratis testen! (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 Unterschied margin - padding
Beschreibung: Praktisches Beispiel in 👍 CSS für den ✅ Unterschied von margin und padding bei der Einstellung von Abstände innerhalb und außerhalb einer Fläche.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel