Das Box-Modell

Bevor wir uns in die Details von Margin und Padding vertiefen, ist es wichtig, das Box-Modell zu verstehen. Jedes HTML-Element kann als ein Rechteck betrachtet werden, das sich aus vier Bereichen zusammensetzt:

1. Content (Inhalt): Der eigentliche Inhalt des Elements.
2. Padding (Innenabstand): Der Abstand zwischen dem Inhalt und dem Rand des Elements.
3. Border (Rand): Der Rahmen um das Element.
4. Margin (Außenabstand): Der Abstand zwischen dem Rahmen des Elements und anderen Elementen.

Definitionen

• Padding: Padding ist der innere Abstand zwischen dem Inhalt eines Elements und dessen Rand (Border). Es sorgt dafür, dass der Inhalt nicht direkt am Rand klebt.
• Margin: Margin ist der äußere Abstand zwischen dem Rand eines Elements und anderen umgebenden Elementen. Es bestimmt den Abstand zu den Nachbarelementen.

Anwendung von Padding (InnenAbstand)

Padding kann auf vier Seiten eines Elements angewendet werden: oben, rechts, unten und links. Es gibt spezifische CSS-Eigenschaften für jede Seite sowie eine verkürzte Syntax.

• Einzelne Seiten:

padding-top: 10px; 
padding-right: 15px; 
padding-bottom: 10px; 
padding-left: 15px; 

• Verkürzte Syntax:

padding: 10px 15px; /* oben & unten: 10px, rechts & links: 15px */ 
padding: 10px 15px 20px 5px; /* oben: 10px, rechts: 15px, unten: 20px, links: 5px */ 

Anwendung von Margin (Außenabstand)

Auch Margin kann auf vier Seiten eines Elements angewendet werden. Es gibt spezifische CSS-Eigenschaften für jede Seite sowie eine verkürzte Syntax.

• Einzelne Seiten:

margin-top: 20px; 
margin-right: 25px; 
margin-bottom: 20px; 
margin-left: 25px; 

• Verkürzte Syntax:

margin: 20px 25px;