--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/element-settings/spacing' title: 'Innen- und Außenabstände von Elementen festlegen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:56:50+00:00' updated: '2026-10-24T06:22:44+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Elementen stylen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:22:44+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Innen- und Außenabstände von Elementen festlegen' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:56:50+0000' dateModified: '2026-10-24T06:22:44+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/element-settings/spacing' articleSection: 'Elementen stylen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/element-settings/spacing' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) # Innen- und Außenabstände von Elementen festlegen. Learn DXPR BuilderBuild pagesElementen stylen ## In this guide Related guides - [Textgröße und -farbe ändern](/de/hc/documentation/learn-dxpr-builder/element-settings/typography) 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](/de/hc/documentation/learn-dxpr-builder/getting-started/first-page). - **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: | Größe | Wofür | |---|---| | 8 px | Kleine Lücken in einer Gruppe, zum Beispiel ein Icon mit seiner Beschriftung | | 16 px | Zwischen zusammengehörigen Einträgen | | 24 px | Zwischen Inhaltsblöcken | | 32 px | In einer Card oder einer hervorgehobenen Box | | 48 px | Zwischen Sections | ## 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 ```text +----------------- 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](/de/hc/documentation/learn-dxpr-builder/element-settings/custom-css), 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](/de/hc/documentation/learn-dxpr-builder/element-settings/typography): Den Text in Ihrem auseinandergezogenen Kasten bemessen und färben.