--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/element-settings/spacing' title: 'Binnen- en buitenruimte toevoegen met het boxmodel | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:59:17+00:00' updated: '2026-10-24T06:22:44+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Geef tekst lucht in een gekleurd vak, of duw een knop weg van de alinea erboven. Opvulling is de ruimte binnen de rand van een element; marge is de ruimte erbuiten. Beide stel je in in het boxmodel bovenaan het paneel Stijl. Je thema en een nieuwe sectie brengen hun eigen witruimte mee; deze pagina toont hoe die van jou past. De video geeft een knop een bovenmarge van 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: 'Binnen- en buitenruimte toevoegen met het boxmodel' description: |- Geef tekst lucht in een gekleurd vak, of duw een knop weg van de alinea erboven. Opvulling is de ruimte binnen de rand van een element; marge is de ruimte erbuiten. Beide stel je in in het boxmodel bovenaan het paneel Stijl. Je thema en een nieuwe sectie brengen hun eigen witruimte mee; deze pagina toont hoe die van jou past. De video geeft een knop een bovenmarge van 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-24T04:59:17+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/nl/hc/documentation/learn-dxpr-builder/element-settings/spacing' articleSection: 'Elementen stylen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/element-settings/spacing' description: |- Geef tekst lucht in een gekleurd vak, of duw een knop weg van de alinea erboven. Opvulling is de ruimte binnen de rand van een element; marge is de ruimte erbuiten. Beide stel je in in het boxmodel bovenaan het paneel Stijl. Je thema en een nieuwe sectie brengen hun eigen witruimte mee; deze pagina toont hoe die van jou past. De video geeft een knop een bovenmarge van 24 px. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[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) # Binnen- en buitenruimte toevoegen met het boxmodel. Learn DXPR BuilderBuild pagesElementen stylen ## In this guide Related guides - [Tekstgrootte en -kleur instellen](/nl/hc/documentation/learn-dxpr-builder/element-settings/typography) Geef tekst lucht in een gekleurd vak, of duw een knop weg van de alinea erboven. Opvulling is de ruimte binnen de rand van een element; marge is de ruimte erbuiten. Beide stel je in in het boxmodel bovenaan het paneel **Stijl**. Je thema en een nieuwe sectie brengen hun eigen witruimte mee; deze pagina toont hoe die van jou past. De video geeft een knop een bovenmarge van 24 px. ## Voordat je begint - Open de pagina in DXPR Builder; als je op een element wijst toont hij zijn besturingsbalk met **More**. Nieuw in de builder? Zie [Je eerste pagina](/nl/hc/documentation/learn-dxpr-builder/getting-started/first-page). - **Opslaan** in het dialoogvenster bewaart een wijziging in de editor. **Opslaan** op de builder-werkbalk boven je inhoud slaat de pagina op en toont “Veld opgeslagen”. - **Gebruik het boxmodel** om één kier op één pagina te dichten. - **Gebruik je thema of een klasse** voor witruimte die zich herhaalt, zoals de kier tussen alle secties. - **Houd een schaal aan.** Pagina's ogen rustig als elke kier uit een paar maten komt: | Maat | Gebruik hem voor | |---|---| | 8 px | Kleine kieren in een groep, zoals een pictogram en zijn label | | 16 px | Tussen verwante items | | 24 px | Tussen inhoudsblokken | | 32 px | In een kaart of een uitgelicht vak | | 48 px | Tussen secties | ## Recept: ruimte rond een knop 1. Beweeg over de **Knop**, klik op **More** en daarna **Instellingen**. 2. Open het paneel **Stijl** en klik op de bovenkant van **Marge**, de buitenste ring van het boxmodel. De slotjes beginnen open, dus alleen deze kant verandert. 3. Controleer of de eenheidsknop **PX** toont. Typ 24 in het waardeveld en druk op Enter. De kant toont nu 24px en de knop schuift omlaag. 4. Klik in het dialoogvenster op **Opslaan** en daarna **Opslaan** op de werkbalk. Op een Knop komt de marge op de knop zelf, dus de ruimte begint direct aan zijn rand. ## Recept: een hogere sectie Een nieuwe sectie krijgt boven- en onderopvulling van de klasse **Verticale opvulling grootte 5 (py-5)**, wat het boxmodel verslaat. Verwijder die klasse eerst. Controleer of de titel van het dialoogvenster Sectie leest, niet Rij of Kolom. 1. Beweeg over de **Sectie**, klik op **More** en daarna **Instellingen**. 2. Zoek in het paneel **Algemeen** **HTML-klassen** en klik op de × op de chip **Verticale opvulling grootte 5 (py-5)**. De sectie verliest wat ruimte boven- en onderaan. Als er geen zo'n chip is, sla je deze stap over. 3. Open het paneel **Stijl**. Klik op de bovenkant van **Opvulling**, typ 96 en druk op Enter. 4. Doe hetzelfde voor de onderkant van **Opvulling**. Beide kanten tonen nu 96px en de sectie wordt hoger. 5. Klik in het dialoogvenster op **Opslaan** en daarna **Opslaan** op de werkbalk. ## Wat je ziet Elke kant die je instelt toont zijn waarde in het boxmodel, zoals 24px. De knop staat 24 px lager, en de sectie heeft 96 px ruimte boven en onder zijn inhoud. ## Hoe het boxmodel werkt ```text +----------------- Margin ------------------+ || +-------------- Border ---------------+ | || | +----------- Padding ------------+ | | || | | | | | || | | width × height | | | || | | | | | || | +--------------------------------+ | | || +-------------------------------------+ | +-------------------------------------------+ ``` - Elke ring heeft vier kanten. Een kant toont zijn waarde, zoals 24px, of “-” als hij niet is ingesteld. - Klik op een kant om een kleine kiezer te openen met een regelaar, een waardeveld en een eenheidsknop. De eenheid is **PX** of **%**; **Rand** neemt alleen px. - Typ een waarde en druk op Enter, of sleep de regelaar. De pijltjestoetsen omhoog en omlaag wijzigen de waarde met 1. Escape sluit de kiezer. - Om een kant te wissen maak je het waardeveld leeg en druk je op Enter. De kant toont “-” en je thema beslist weer. Marge loopt van -200 tot 200, opvulling van 0 tot 200 en rand van 0 tot 50. Breedte en hoogte lopen van 0 tot 2000. Een negatieve marge trekt het element naar zijn buur toe. Een getypte waarde buiten het bereik wordt afgekapt op de dichtstbijzijnde limiet. ### De slotjes Elke ring heeft een slotje naast zijn naam: **Marge**, **Rand** en **Opvulling**. Als het slotje dicht is, gaat een waarde die je op één kant instelt naar alle vier. Als het open is, behoudt elke kant zijn eigen waarde. Het slotje sluiten wijzigt de waarden die je al hebt niet; alleen de volgende waarde die je instelt wordt gekopieerd. ### Procenten, grootte en schermbreedte Een procentwaarde is een deel van de breedte van de bovenliggende laag van het element, ook voor boven en onder. Dus 10% bovenopvulling is hoger in een brede kolom dan in een smalle. Het midden van het boxmodel bevat breedte × hoogte. Elementen die zichzelf bemeten, zoals Afbeelding en Plattegrond, negeren die twee vakken. Het boxmodel heeft geen waarden per schermgrootte. Voor meer opvulling op grote schermen dan op telefoons gebruik je juist Bootstrap-klassen. Bijvoorbeeld `py-3 py-lg-5` geeft 16 px op kleinere schermen en 48 px vanaf 992 px breed. Zie [HTML-ID en klassen](/nl/hc/documentation/learn-dxpr-builder/element-settings/custom-css) voor hoe je ze typt. ## Hoe je waarden samenkomen met de witruimte van het thema - **Nieuwe secties brengen opvulling mee.** Een sectie die je in de editor toevoegt krijgt de klasse **Verticale opvulling grootte 5 (py-5)**: 3rem, ongeveer 48 px, boven- en onderaan. De is gemarkeerd met `!important`, dus hij verslaat je **Opvulling** boven en onder. Linker- en rechteropvulling werken nog wel. - **Witruimteklassen winnen.** Elke Bootstrap-witruimteklasse onder **HTML-klassen**, zoals **Bovenmarge grootte 3 (mt-3)**, verslaat je waarde op dezelfde kant. - **Kolommen houden een kier.** Bootstrap geeft elke kolom 12 px opvulling links en rechts. **Opvulling** links of rechts op een Kolom vervangt hem, zodat de inhoud niet meer op één lijn staat met de volgende kolom. - **Alinea's behouden hun eigen witruimte.** Je thema zet ruimte onder elke alinea en kop. Het boxmodel wijzigt die ruimte niet, omdat het op het element als geheel werkt. - **Marges van buren overlappen meestal.** Als een element boven een ander staat, delen de ondermarge van het eerste en de bovenmarge van het tweede de kier. De grotere wint; ze tellen niet op. ## Als je het niet ziet - **Boven- of onderopvulling op een sectie doet niets.** De **Verticale opvulling grootte 5 (py-5)** wint. Verwijder zijn chip onder **HTML-klassen**. - **Een marge- of opvullingwaarde doet niets.** Een Bootstrap-witruimteklasse op dezelfde kant wint. Verwijder zijn chip, of gebruik alleen de klasse. - **Opvulling is niet te zien.** Het element heeft geen achtergrond of rand, dus de ruimte is onzichtbaar. Kies een **Achtergrond**-kleur terwijl je hem aanpast. - **De waarde sprong naar 200.** Opvulling en marge stoppen bij 200, rand bij 50. Gebruik een kleinere waarde, of een procent. - **De pagina staat krap op telefoons.** Dezelfde pixelwaarde geldt op elk scherm. Gebruik kleinere waarden, een procent, of responsieve klassen. - **De twee kieren telden niet op.** Gestapelde marges overlappen en de grotere wint. Zet de hele kier op een van de twee elementen. - **Kolommen staan niet meer op één lijn.** **Opvulling** aan de zijkant op een Kolom heeft de kier van het raster vervangen. Maak die kanten weer leeg. ## Wat nu? - [Typografie](/nl/hc/documentation/learn-dxpr-builder/element-settings/typography): geef de tekst in je ruim opgezette box grootte en kleur.