Spickzettel: CSS Padding und Margin im Überblick

Mit CSS-Eigenschaften können Layout und Design von HTML-Elementen bestimmt werden. Vor allem Abstände und Rahmen spielen dabei eine wichtige Rolle, denn sie machen das Design erst übersichtlich. Elemente können so voneinander abgetrennt oder auch durch einen entsprechenden Rahmen hervorgehoben werden.

In diesem Beitrag erfahren Sie, wie Sie die CSS-Eigenschaften Padding und Margin richtig einsetzen und was das Box-Modell damit zu tun hat.

Was ist Padding in CSS?

Die CSS-Eigenschaft padding beschreibt den Innenabstand eines Elementes zu seinem Rahmen. Die optische Polsterung kann dabei für alle vier Seiten des Elementes (top, right, bottom, left) festgelegt werden. Die Werte werden meist in Pixeln oder Prozent angeben.

Was ist Margin in CSS?

Mit der CSS-Eigenschaft margin wird der Außenabstand eines Elementes zu seinen umliegenden Elementen bestimmt. Die Margin kann für alle vier Seiten (top, right, bottom, left) konfiguriert werden und wird meist in Pixeln oder Prozent definiert. Der durch die Margin definierte Abstand wird als Weißraum bezeichnet.

Grundkenntnisse HTML: Absatz erzeugen durch Block-Elemente 

Um zu verstehen, wie Sie mit CSS ein HTML-Dokument designen können, ist es notwendig, grundlegende Regeln der beiden Sprachen zu kennen. Vor allem die Anordnung und Abstände von Block-Elementen können dabei zur Herausforderung werden. Blockelemente erzeugen zwar bereits im HTML einen Absatz, weisen jedoch noch keinen Innen- oder Außenabstand zu anderen Elementen auf.

Mithilfe der Eigenschaften padding und margin können Sie dies entsprechend anpassen. Die Abstände sorgen für ein übersichtliches Design und eine bessere Lesbarkeit der Inhalte. Um den Unterschied der beiden Eigenschaften jedoch zu verstehen, müssen Sie wissen, wie CSS und HMTL miteinander funktionieren.

CSS behandelt HTML-Elemente nämlich so, als läge ein Kasten um sie herum. Durch entsprechende Eigenschaften kann das Design dann angepasst werden. Die Kästen bestehen jeweils aus mehreren Eigenschaften, die im Box-Modell näher definiert werden.

Block-Elemente vs. Inline-Elemente: Das müssen Sie wissen

Im HTML-Code wird zwischen Block- und Inline-Elementen unterschieden. Blockelemente werden dabei durch Höhe und Breite definiert. Sie werden stets mit einer neuen Zeile beginnend angezeigt. Dadurch erzeugen sie einen Absatz und können zu umliegenden Elementen ausgerichtet werden. Zu den Blockelementen gehören beispielsweise Überschriften (h1-h6), das Absatz-Element <p>, sowie der <div>-Container.

Die Größe von Inline-Elementen hingegen wird durch die Größe des Inhalts vorgegeben. Sie fließen mit dem Inhalt zusammen und sind den Blockelementen untergeordnet. Typische Beispiele sind der strong-Tag, <em> sowie die Attribute <a> oder <img>. Dennoch können auch für Inline-Elemente padding, border und margin bestimmt werden. Die Anwendung ist jedoch eher unüblich.

CSS-Grundkenntnisse: Das Box-Modell einfach erklärt

Das Box-Modell wird genutzt, um die Darstellung der HTML-Elemente und die entsprechenden CSS-Eigenschaften zu beschreiben. Die Box (oder der Kasten) setzt sich dabei aus verschiedenen Rechtecken und Begrenzungen zusammen.

Die folgende Grafik visualisiert das Box-Modell:

Quelle: In Word erstellt

content-box

Die Content-Box definiert den Inhaltsbereich, sprich das jeweilige HTML-Element (Text, Bild etc.), das durch die angegebene Breite (width) und Höhe (height) bestimmt wurde. Ist keine Größe definiert worden, wird das Element automatisch an die Seite angepasst.

padding-box

Die Padding-Box beschreibt den Innenabstand des Elementes zu seinem Element-Rahmen (border). Sie gehört zur Content-Box dazu und wird daher zur Breite und Höhe des Elementes dazugerechnet.

border-box

HTML-Elemente sind von einem Rahmen umgeben. Selbst wenn dieser nicht sichtbar ist (bei 0px), gehört er zum Element dazu. Die Border-Box umschließt also den Bereich der Content-Box, das Padding sowie den zum Element gehörenden Rahmen. 

margin-box

Der Begrenzungsbereich oder Außenabstand (margin) definiert den Bereich zwischen dem Element-Rahmen und den umliegenden Elementen.

Was bedeutet die CSS-Eigenschaft padding?

Die CSS-Eigenschaft padding ist vor allem für das Layout der verschiedenen HTML-Elemente bedeutend. Sie bezeichnet dabei den Abstand, den der Inhalt eines Elementes zum entsprechenden Rahmen einnimmt. Das Padding bildet sozusagen die Polsterung zwischen Element und Element-Rahmen.

Die Eigenschaft besitzt die Initialwerte padding-bottom, padding-left, padding-right, sowie padding-top. Das bedeutet, dass alle vier Seiten des Elementes mit der padding-Eigenschaft konfiguriert werden können. Dabei können sowohl absolute Längeneinheiten wie px, pt oder em genutzt werden, als auch die Angabe in Prozent. Der Prozentwert bezieht sich dann auf die Größe des umliegenden Elementes oder aber das Browserfenster, wenn kein umliegendes Element vorhanden ist.

Beispiel:

 
<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 4px solid grey;
  background-color: orange;
  padding-top: 100px;
  padding-right: 50px;
  padding-bottom: 30px;
  padding-left: 50px;
}
</style>
</head>
<body>
 
<h2>So verwenden Sie <i>padding</i></h2>
 
<div>Dieses div-Element besitzt folgende padding-Werte:
<ul>
<li> padding-top: 100px.</li>
<li> padding-right: 50px.</li>
<li> padding-bottom: 30px.</li>
<li>padding-left: 50px.</li>
</ul></div>
 
</body>
</html>

Bild: Screenshot W3schools

Der Innenabstand kann auch mithilfe der Kurzform (shorthand property) „padding“ definiert werden. Diese vereint alle Initialwerte. Dabei ist die Syntax entscheidend dafür, welche Seite jeweils konfiguriert wird. Die folgenden Schreibweisen sind möglich:

1 Wert:

• Wert gilt für alle vier Seiten.

2 Werte:

• Der erste Wert gilt für oben (top) und unten (bottom).
• Der zweite Wert gibt links (left) und rechts (right) an.

3 Werte:

• Der erste Wert gilt für oben (top).
• Der zweite Wert gilt für rechts (right) und links (left).
• Der dritte Wert gilt für unten (bottom).

4 Werte:

• Die Werte folgen dem Uhrzeigersinn oben beginnend: oben (top) – rechts (right) – unten (bottom) – links (left).

Beispiel für die shorthand property padding:

 
<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 4px solid grey;
  background-color: orange;
  padding: 100px 50px 30px 50px;
}
</style>
</head>
<body>
 
<h2>So verwenden Sie <i>padding</i></h2>
 
<div>Dieses div-Element besitzt folgende padding-Werte:
<ul>
<li> padding-top: 100px.</li>
<li> padding-right: 50px.</li>
<li> padding-bottom: 30px.</li>
<li>padding-left: 50px.</li>
</ul></div>
 
</body>
</html>

Bild: Screenshot W3schools

Wichtig zu beachten ist außerdem, dass das Padding zur Größe des jeweiligen Elementes dazugehört. Haben Sie also beispielsweise ein Element mit der Breite sowie Höhe von 250px und einem Padding für jede Seite von 25px festgelegt, beträgt die Gesamtgröße des Elementes 300x300px.

Wo liegt der Unterschied zur CSS Margin?

Im Gegensatz zum padding beschreibt die CSS-Eigenschaft margin nicht den Innen-, sondern den Außenabstand eines Elementes. Im Box-Modell ist die Margin also der Raum, der zwischen dem Element-Rahmen und den umliegenden Elementen liegt. Anders als das Padding wird die Margin jedoch nicht zur Größe des Elementes dazugerechnet.

Die Syntax der beiden Eigenschaften ist jedoch identisch. Auch der Außenabstand setzt sich aus den Initialwerten margin-top, margin-bottom, margin-left und margin-right zusammen. Mit der shorthand property margin können alle Werte angegeben werden. Die Reihenfolge gleicht dabei der oben beschriebenen Schreibweise für die padding-Eigenschaft:

1 Wert:

• Wert gilt für alle vier Seiten.

2 Werte:

• Der erste Wert gilt für oben (top) und unten (bottom).
• Der zweite Wert gibt links (left) und rechts (right) an.

3 Werte:

• Der erste Wert gilt für oben (top).
• Der zweite Wert gilt für rechts (right) und links (left).
• Der dritte Wert gilt für unten (bottom).

4 Werte:

• Die Werte folgen dem Uhrzeigersinn oben beginnend: oben (top) – rechts (right) – unten (bottom) – links (left).

Neben den Längeneinheiten und dem Prozentwert kann der Margin auch der Wert „auto“ zugewiesen werden. Der Außenabstand wird in diesem Fall automatisch an das Browserfenster angepasst.

 
<!DOCTYPE html>
<html>
<head>
<style>
div.eins {
  border: 4px solid grey;
  background-color: orange;
  padding: 100px 50px 30px 50px;
  margin: 25px;
}
div.zwei {
  border: 4px solid grey;
  background-color: orange;
  padding: 100px 50px 30px 50px;
  margin: 25px;
}
</style>
</head>
<body>
 
<h2>So verwenden Sie <i>padding</i> und <i>margin</i></h2>
 
<div class="eins">Dieses div-Element besitzt folgende padding-Werte:
<ul>
<li> padding-top: 100px.</li>
<li> padding-right: 50px.</li>
<li> padding-bottom: 30px.</li>
<li>padding-left: 50px.</li>
</ul></div>
 
<div class="zwei"> Der Außenabstand der beiden Elemente beträgt 25px.</div>
 

Bild: Screenshot W3schools

Die CSS-Eigenschaften padding und margin definieren jeweils den Innen- sowie Außenabstand eines HTML-Elementes. Gerade Blockelemente werden mithilfe der beiden Eigenschaften konfiguriert und zu anderen Elementen ausgerichtet. So können ein übersichtliches Design und eine gute Lesbarkeit der Inhalte sichergestellt werden.

Titelbild: oatawa / iStock / Getty Images Plus