Innen- und Außenabstände von Elementen festlegen.

Geben Sie Text Raum in einem farbigen Kasten oder schieben Sie einen Button vom Absatz darüber weg. Padding ist der Raum innerhalb der Elementkante; Margin ist der Raum außerhalb. Beides stellen Sie im Boxmodell oben im Style-Panel ein. Ihr Theme und eine neue Section bringen eigene Abstände mit; diese Seite zeigt, wie Ihre dazu passen.

Das Video gibt einem Button einen oberen Außenabstand von 24 px.

Bevor Sie beginnen

• Öffnen Sie die Seite in DXPR Builder; wenn Sie auf ein Element zeigen, erscheint seine Steuerleiste mit More. Neu im Builder? Siehe Ihre erste Seite.
• Speichern im Dialog behält eine Änderung im Editor. Speichern in der Builder-Symbolleiste über Ihrem Inhalt speichert die Seite und zeigt „Saved field“.
• Nutzen Sie das Boxmodell, um eine Lücke auf einer Seite zu beheben.
• Nutzen Sie Ihr Theme oder eine Klasse für Abstände, die sich wiederholen, zum Beispiel die Lücke zwischen allen Sections.
• Bleiben Sie bei einer Skala. Seiten wirken ruhig, wenn jede Lücke aus wenigen Größen kommt:

Rezept: Raum um einen Button

1. Fahren Sie mit der Maus über den Button, klicken Sie auf More und dann auf Settings.
2. Öffnen Sie das Style-Panel und klicken Sie auf die Oberseite von Margin, den äußeren Ring des Boxmodells. Die Schlösser stehen zunächst offen, sodass sich nur diese Seite ändert.
3. Prüfen Sie, ob die Einheitenschaltfläche PX zeigt. Geben Sie 24 in das Wertfeld ein und drücken Sie die Eingabetaste. Die Seite zeigt nun 24px und der Button bewegt sich nach unten.
4. Klicken Sie im Dialog auf Speichern und dann in der Symbolleiste auf Speichern.

Auf einem Button liegt der Margin auf dem Button selbst, sodass der Raum direkt an seiner Kante beginnt.

Rezept: ein höherer Abschnitt

Eine neue Section erhält oberen und unteren Innenabstand aus der Klasse Vertical padding size 5 (py-5), die das Boxmodell schlägt. Entfernen Sie zuerst diese Klasse. Prüfen Sie, ob der Dialogtitel Section lautet, nicht Row oder Column.

1. Fahren Sie mit der Maus über die Section, klicken Sie auf More und dann auf Settings.
2. Finden Sie im General-Panel HTML classes und klicken Sie auf das × auf dem Vertical padding size 5 (py-5)-Chip. Die Section verliert oben und unten etwas Raum. Gibt es keinen solchen Chip, überspringen Sie diesen Schritt.
3. Öffnen Sie das Style-Panel. Klicken Sie auf die Oberseite von Padding, geben Sie 96 ein und drücken Sie die Eingabetaste.
4. Tun Sie dasselbe für die Unterseite von Padding. Beide Seiten zeigen nun 96px und der Abschnitt wächst in die Höhe.
5. Klicken Sie im Dialog auf Speichern und dann in der Symbolleiste auf Speichern.

Was Sie sehen

Jede gesetzte Seite zeigt ihren Wert im Boxmodell, zum Beispiel 24px. Der Button sitzt 24 px tiefer und der Abschnitt hat 96 px Raum über und unter seinem Inhalt.

Wie das Boxmodell funktioniert

+----------------- Margin ------------------+
||  +-------------- Border ---------------+  |
||  |  +----------- Padding ------------+ |  |
||  |  |                                | |  |
||  |  |         width × height         | |  |
||  |  |                                | |  |
||  |  +--------------------------------+ |  |
||  +-------------------------------------+  |
+-------------------------------------------+

• Jeder Ring hat vier Seiten. Eine Seite zeigt ihren Wert, zum Beispiel 24px, oder „-“, wenn sie nicht gesetzt ist.
• Klicken Sie auf eine Seite, um eine kleine Auswahl mit Regler, Wertfeld und Einheitenschaltfläche zu öffnen. Die Einheit ist PX oder %; Border nimmt nur px.
• Geben Sie einen Wert ein und drücken Sie die Eingabetaste oder ziehen Sie den Regler. Die Pfeiltasten nach oben und unten ändern den Wert um 1. Escape schließt die Auswahl.
• Um eine Seite zurückzusetzen, leeren Sie das Wertfeld und drücken Sie die Eingabetaste. Die Seite zeigt „-“ und Ihr Theme entscheidet wieder.

Margin reicht von -200 bis 200, Padding von 0 bis 200 und Border von 0 bis 50. Breite und Höhe reichen von 0 bis 2000. Ein negativer Margin zieht das Element zu seinem Nachbarn. Ein eingetippter Wert außerhalb des Bereichs wird auf die nächste Grenze gekürzt.

Die Schlösser

Jeder Ring hat ein Schloss neben seinem Namen: Margin, Border und Padding. Wenn das Schloss geschlossen ist, geht ein Wert, den Sie auf einer Seite setzen, an alle vier. Wenn es offen ist, behält jede Seite ihren eigenen Wert. Das Schließen des Schlosses ändert nicht die Werte, die Sie bereits haben; nur der nächste Wert, den Sie setzen, wird kopiert.

Prozent, Größe und Bildschirmbreite

Ein Prozentwert ist ein Anteil an der Breite des Elternelements, auch oben und unten. So ist 10 % oberes Padding in einer breiten Spalte höher als in einer schmalen.

Die Mitte des Boxmodells enthält Breite × Höhe. Elemente, die sich selbst bemessen, zum Beispiel Image und Map, ignorieren diese beiden Felder.

Das Boxmodell hat keine Werte pro Bildschirmgröße. Für mehr Padding auf großen Bildschirmen als auf Smartphones nutzen Sie stattdessen Bootstrap-Klassen. Zum Beispiel gibt py-3 py-lg-5 16 px auf kleineren Bildschirmen und 48 px ab 992 px Breite. Siehe HTML-ID und Klassen, wie man sie eintippt.

Wie Ihre Werte auf die Theme-Abstände treffen

• Neue Sections bringen Padding mit. Eine Section, die Sie im Editor hinzufügen, erhält die Klasse Vertical padding size 5 (py-5): 3rem, etwa 48 px, oben und unten. Die Klasse ist mit !important markiert, sodass sie Ihr oberes und unteres Padding schlägt. Linkes und rechtes Padding funktionieren weiterhin.
• Abstandsklassen gewinnen. Jede Bootstrap-Abstandsklasse unter HTML classes, zum Beispiel Top margin size 3 (mt-3), schlägt Ihren Wert auf derselben Seite.
• Spalten behalten eine Lücke. Bootstrap gibt jeder Spalte links und rechts 12 px Padding. Linkes oder rechtes Padding auf einer Column ersetzt es, sodass der Inhalt nicht mehr mit der nächsten Spalte auf einer Linie steht.
• Absätze behalten eigene Abstände. Ihr Theme setzt Raum unter jeden Absatz und jede Überschrift. Das Boxmodell ändert diesen Raum nicht, denn es wirkt auf das Element als Ganzes.
• Margins von Nachbarn überlappen meist. Wenn ein Element über einem anderen sitzt, teilen sich der untere Margin des ersten und der obere Margin des zweiten die Lücke. Der größere gewinnt; sie addieren sich nicht.

Wenn Sie es nicht sehen

• Oberes oder unteres Padding auf einem Abschnitt tut nichts. Die Klasse Vertical padding size 5 (py-5) gewinnt. Entfernen Sie ihren Chip unter HTML classes.
• Ein Margin- oder Padding-Wert tut nichts. Eine Bootstrap-Abstandsklasse auf derselben Seite gewinnt. Entfernen Sie ihren Chip oder nutzen Sie nur die Klasse.
• Padding zeigt sich nicht. Das Element hat keinen Hintergrund und keinen Rahmen, sodass der Raum unsichtbar ist. Wählen Sie einen Background, während Sie es einstellen.
• Der Wert ist auf 200 gesprungen. Padding und Margin stoppen bei 200, Border bei 50. Nutzen Sie einen kleineren Wert oder ein Prozent.
• Die Seite ist eng auf Smartphones. Derselbe Pixelwert gilt auf jedem Bildschirm. Nutzen Sie kleinere Werte, ein Prozent oder responsive Klassen.
• Die beiden Lücken haben sich nicht addiert. Gestapelte Margins überlappen und der größere gewinnt. Legen Sie die ganze Lücke auf eines der beiden Elemente.
• Spalten stehen nicht mehr auf einer Linie. Seitliches Padding auf einer Column hat die Rasterlücke ersetzt. Leeren Sie diese Seiten erneut.

Wie geht es weiter?

• Typografie: Den Text in Ihrem auseinandergezogenen Kasten bemessen und färben.