Margin und Padding erklärt - CSS Basics

Wenn es an die Gestaltung von Webseiten geht, wird man früher oder später auf die Begriffe Margin und Padding stoßen. Egal, ob es um das Erstellen von Buttons oder der Anordnung von Textfeldern geht – man kommt selten drum herum. Daher erklären wir euch hier einmal die Unterschiede.

Pad… was?

Die Begriffe Margin und Padding stammen aus dem CSS. Mit dessen Hilfe werden die unterschiedlichen Elemente wie Text, Überschriften, Links, Buttons und Sektionen gestaltet. Eben alle Elemente, aus denen deine Homepage besteht.

Element

Um mit Padding und Margin arbeiten zu können brauchen wir also zu allererst ein Element. Jedes Element wird durch ein Start-Tag und ein End-Tag definiert.
Zum Beispiel für eine Sektion: <div> Inhalt </div>
für eine Überschrift: <h1>Überschrift</h1>oder ein Linktext: <a href=“https://de.wordpress.org/“ >Linkname</a>

Jedes dieser Elemente hat nun Eigenschaften, die seine Position und Ausrichtung bestimmen.

Nehmen wir als Beispiel mal einen Button, um alles deutlicher zu machen. Diesen wollen wir aus einem Link erstellen. Der Link ist nun unser Element z.B.:

<a href=“https://de.wordpress.org/“ >Linkname</a>

Diesen habe ich nun als Button gestaltet. Anhand dessen werden wir die einzelnen Elemente nun erklären.

Padding

Unter Padding versteht man den Innenabstand des Elements. Das ist der Zwischenraum zwischen dem Inhalt eines Elements und der Elementgrenze.

In unserem Beispiel ist der Padding der türkise Bereich zwischen dem Linktext und der Buttonumrandung. Das bedeutet: Wählen wir hier ein größeres Padding, wird der Button größer und wenn ich meinem Link eine Hintergrundfarbe gebe, dann färbe ich den Padding ein.

Border

Als nächstes treffen wir auf den Border. Das ist die Umrandung eines Elementes (die Umrandung des Buttons). Sie stellt die Grenze des Elements dar und kann unsichtbar sein oder z.B. wie in unserem Fall, aus einer Linie bestehen.

Margin

Der Wert Margin wird zum Positionieren des Elementes genutzt. Es handelt sich hierbei um den Außenabstand. Dieser befindet sich außerhalb des eigentlichen Elements (das geht ja bis zum Border). So kann der Abstand zu anderen Elementen oder zu den Seitenrändern festgelegt werden. Dieser Bereich wird nicht durch Einstellungen am Element farblich hinterlegt. In unserem Fall ist dies der orangene Teil (der eigentlich unsichtbar ist und nur eingefärbt wurde).

Der Button

Ich kann dem Padding, dem Border und dem Margin jeweils eine Breite in pixeln oder Prozent nach oben, rechts, unten oder links geben und so das Element gestalten. Padding und Border können zusätzliche grafische Attribute bekommen wie Farbe und andere Eigenschaften.

Für den Button im Beispiel habe ich folgenden Code verwendet:

a {
color: #fff;
padding: 7px 25px 7px 25px;
background-color: #23DABA;
border: #666 2px solid;
border-radius: 4px;
margin-right: 30px;
}

Hier findest du zudem ein gutes Video, dass das Erstellen eines Buttons einmal darstellt. Dort wirst du noch einmal gut sehen können, was es mit den Begriffen Margin und Padding auf sich hat.

Mehr ins Thema gehen?

Außerdem ist w3schools.com immer eine gute Anlaufstelle für alle, die des englischen mächtig sind. Sie haben auch einen guten Artikel über das CSS Box Modell, dessen Elemente wir euch hier erklärt haben. Da seht ihr dann auch, wie das genau im Code funktioniert und aussieht.

Anschließend kannst du dich ja mal selbst testen: Bau doch einen Button auf deiner Seite und spiele ein wenig mit Margin und Padding herum. Mit ein bisschen Übung verinnerlicht man die Begriffe deutlich schneller als beim Lesen alleine :)

Margin und Padding erklärt – CSS Basics