Vroeg of laat krijg je met het ontwerpen en vormgeven van je webpagina te maken met Margin en Padding. Dit is de ruimte in en om een tekst of beeldelement. Voor menig cursist is dit lastig. Daarom deze uitleg.

Wat is Margin en Padding precies

Om te beginnen is het goed te weten wat een padding en margin is. Margin en padding zijn eigenschappen die je aan een html element kunt toekennen. Het zijn twee van de meest bruikbare eigenschappen om je element tot op de pixel nauwkeurig te positioneren.

De vormgeving van een element wordt bepaald door een rechthoekige gebied, de box. Van binnen naar buiten bestaat de box uit de inhoud van het element, de padding, de border en de margin. Visueel ziet het er zo uit:

Margin

De margin is de afstand van de rand van een element tot de rand van het parent element of de rand van een aangrenzend element. De margin is transparent en neemt dus de achtergrondkleur aan van het parent element.

Border

De border is de rand van een element.

Padding

De padding is de afstand tussen de rand van een element en de inhoud. Als een achtergrondkleur gebruikt wordt voor het element, dan heeft de padding dezelfde kleur.

De grootte van de box wordt bepaald door de som van de afmetingen van het element en de breedte van de margin, de border en de padding.

Margin en padding instellen met WP Beaver Builder

Margin en padding instellen met WP Bakery Builder

Ervan uitgaande dat je WP Bakery Builder plugin gebruikt om pagina’s vorm te geven, kun je de padding en margin per kader/element aanpassen. Je kan bij vrijwel elk element op de eigenschappen klikken met het potloodje en de padding en margin aanpassen. Ga vervolgens naar ‘Design opties’. Je krijgt de volgende afbeelding te zien waar je het aantal pixels kan invoeren. Let op dat je alle waardes in pixels invoert met ‘px’, bijvoorbeeld ’20px’ of ’30px’:

Margin en padding voor gevorderden: pixels en percentages

Normaal gesproken voor je standaard pixels als waarde in. Dit is altijd dezelfde absolute waarde op alle apparaten waar de webpagina op bekeken wordt, bijvoorbeeld 20 pixels. Je kan ook percentages invoeren. Bijvoorbeeld 5% bij margin-top. Je krijgt dan een lege ruimte van 5% ten opzichte van de breedte van je browser. Dit werkt responsive heel consistent en mooi op telefoons, tablets en smartphones.

Opbouw webpagina: wanneer margin of padding gebruiken

Wat vaak het lastigste is, is het bepalen waar je de padding en margin moet instellen. Je moet goed in de gaten houden hoe je pagina is opgebouwd. Een pagina bestaat uit meerdere rijen onder elkaar. Iedere rij bestaat uit 1 of meer kolommen. In iedere kolom bevind zich het element. Hierarchisch is de volgorde dus:

Pagina (hoogste niveau)

Bestaande uit kolommen onder elkaar

Rij (of row of content band)

De rij over de hele breedte van je pagina-layout. Waarschijnlijk plaats je meerdere rijen onder elkaar

Kolom (of column)

Iedere rij bestaat uit 1 of meerdere kolommen naast elkaar, meestal 1, 2 3, 4 of 6 kolommen omdat dit responsive goed werkt.

Element (laagste niveau)

In iedere kolom plaatst je het element waar je je content mee kan bepalen. Met WP Bakery builder kun je het element altijd aanpassen met het groene kadertje op het element. Veel gebruikte elementen:

– Tekst-element

– Afbeelding-element

– Call to action-element

Video uitleg WP Bakery Builder

In de onderstaande video van WP Bakery Builder staat het mooi uitgelegd.

Voorbeelden Margin en padding WP Bakery Builder instellingen

2 simpele rijen onder elkaar

Geen padding of margin

Kolomsettings > Design opties

Padding 0 0 0 0

Rijsettings > Design opties

Margin 20px 0 0 0

Rijsettings (2 kolommen) > Design opties

standaard

Rijsettings > General

Columns gap: 20px

Rijsettings > General

Row stretch: Stetch row and content
Columns gap: 20px

padding-inline voor gevorderden

De CSS eigenschap padding-inline definieert de logische inline begin- en eindvulling van een element, die overeenkomt met fysieke opvullingseigenschappen, afhankelijk van de schrijfmodus, richting en tekstoriëntatie van het element. Ik gebruik dit zelf regelmatig voor WordPress websites. Het ziet er zo uit in CSS:

/* <lengte> waarden */
padding-inline: 10px 20px; /* een absolute lengte */
padding-inline: 1em 2em; /* relatief ten opzichte van de tekstgrootte */
padding-inline: 10px; /* een begin- en eindwaarde */

/* <percentage> waarden */
padding-inline: 5% 2%; /* relatief aan de breedte van de dichtstbijzijnde blokcontainer */

/* globale waarden */
padding-inline: inherit;
padding-inline: initial;
padding-inline: revert;
padding-inline: revert;
padding-inline: unset;

Handleiding inline-padding: developer.mozilla.org/en-US/docs/Web/CSS/padding-inline