Binnen- en buitenruimte toevoegen met het boxmodel.

DXPR Builder lerenPagina’s bouwenElementen stylen

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.
  • 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.

Het Stijl-paneel van een knop met een bovenmarge van 24px in het boxmodel, naast de knop Boek een rondleiding met ruimte erboven, onder de tekst Campustours

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.

Het Stijl-paneel van een sectie met 96px boven- en onderopvulling, naast die sectie, nu hoger, met een grijze achtergrond en gecentreerde tekst

Wat je ziet

Boxmodel met 32 px opvulling aan elke kant en een ondermarge van 48 px, naast het grijze Campustours-blok en de knop 48 px eronder

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

+----------------- 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 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: geef de tekst in je ruim opgezette box grootte en kleur.