Margin und Padding sind Bereiche innerhalb und außerhalb deiner Komponenten, deren Größe du konfigurieren kannst. Dadurch verändert sich automatisch auch immer das Spacing zu anderen Komponenten sowie die Position deines Contents innerhalb deiner Seite. Lerne im Folgenden, was die Unterschiede zwischen beider Eigenschaften sind und was genau du mit Hilfe von Margin und Padding einstellen kannst.
Margin
Der Außenbereich deines Contents wird Margin (dt. Spanne) genannt. Es ist der erzwungene Leerraum zwischen dem Content inkl. seiner Grenzen (Border) und der über- und untergeordneten Elementen bzw. Nachbarelementen. Definierst du Werte für Margin, rutscht das Element außerhalb seiner Grenzen (blau-gestrichelten Linie im Editor) nach oben oder unten.
Padding
Padding (dt. Polsterung) beschreibt den Innenabstand zwischen dem Content und der eigenen Content-Grenze. Padding gehört zum Content-Bereich und wird daher zur Größe des Elements dazugezählt. Definierst du Werte für Padding, rutscht das Element innerhalb seiner Grenzen (blau-gestrichelten Linie im Editor) nach oben oder unten.
Border
Mit Border (dt. Grenze) wird der Rahmen bezeichnet, der sich um den Content inkl. seines Innenabstands befindet. Border umschließt den Content-Bereich sowie das Padding.
Spacings von Komponenten konfigurieren
Du kannst Margin und Padding im radiosphere Studio Editor nutzen, um die Größe und Position deiner Komponenten zu konfigurieren. Klicke dazu auf den Design-Button in der oberen Leiste. Auf der rechten Seite im Bereich Spacing kannst du nun Werte für Margin und Padding definieren. Zur Auswahl stehen dir drei verschiedene Wert-Typen, mit denen du die Ausmaße von Komponenten bestimmen kannst. Erfahre hier, welche das sind. Du siehst im Spacing-Bereich jeweils vier leere Felder, in denen du Werte eintragen kannst. Wenn du nicht weißt, welches Feld für was steht, kannst du das hier nachlesen. Sobald du die Werte eingetragen hast, verändert sich der Abstand der Komponente zu anderen Komponenten sowie der gesamten Seite in der Vorschau auf der linken Seite automatisch anhand der eingegebenen Einstellungen. Du kannst die Angaben jederzeit ändern, indem du die Werte in den Feldern überschreibst.