Bokmodel: CSS binnenste marge

De binnenste marge van een element bevindt zich tussen de rand en het inhoudsgebied. De eenvoudigste eigenschap om dit gebied te controleren is de padding-eigenschap.

De CSS padding-eigenschap definieert de witruimte tussen de rand van een element en de inhoud van het element.

CSS padding property

De CSS padding-eigenschap definieert de binnenmarge van een element. De padding-eigenschap accepteert lengte-waarden of percentage-waarden, maar staat negatieve waarden niet toe.

Bijvoorbeeld, als je alle kanten van de h1-elementen 10 pixels binnenmarge wilt hebben, moet je dit zo doen:

h1 {padding: 10px;}

Je kunt ook de binnenmarge van elke kant afzonderlijk instellen in de volgorde boven, rechts, onder, links, waarbij elke kant verschillende eenheden of percentage-waarden kan gebruiken:

h1 {padding: 10px 0.25em 2ex 20%;}

Enkele binnenmarge-eigenschappen

Ook kun je de bovenste, rechter, onderste en linker binnenmarge respectievelijk instellen met behulp van de volgende vier afzonderlijke eigenschappen:

Je zou kunnen denken dat de onderstaande regel hetzelfde effect heeft als de eerdere afkorting:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Percentage-waarden van de binnenmarge

Zoals eerder vermeld, kun je percentage-waarden instellen voor de binnenmarge van een element. Percentage-waarden worden berekend ten opzichte van de breedte van het ouder-element, net als de marges. Dus als de breedte van het ouder-element verandert, veranderen ze ook.

Deze regel stelt de binnenmarge van de paragraaf in op 10% van de breedte van de ouder-element:

p {padding: 10%;}

Bijvoorbeeld: als het ouder-element van een paragraaf een div-element is, dan moet de binnenmarge van het paragraaf worden berekend op basis van de breedte van de div.

<div style="width: 200px;">
<p>Dit paragraaf bevindt zich binnen een DIV die een breedte van 200 pixels heeft.</p>
</div>

Let op:De boven- en onderste binnenmarge zijn gelijk aan de linker- en rechtermarge; dat wil zeggen, de percentagewaarden van de boven- en onderste binnenmarge worden ingesteld ten opzichte van de breedte van de ouder-element, niet ten opzichte van de hoogte.

CSS binnenmarge voorbeeld:

Alle binnenmarge-eigenschappen in één verklaring
Dit voorbeeld toont hoe je alle binnenmarge-eigenschappen in één verklaring instelt met behulp van een afkorting, wat één tot vier waarden kan bevatten.
Onderste binnenmarge instellen 1
Dit voorbeeld toont hoe je de onderste binnenmarge van een cel instelt met behulp van een cm-waarde.
Onderste binnenmarge instellen 2
Dit voorbeeld toont hoe je de onderste binnenmarge van een cel instelt met behulp van een percentage.
Linker binnenmarge instellen 1
Dit voorbeeld toont hoe je de linker binnenmarge van een cel instelt met behulp van een cm-waarde.
Linker binnenmarge instellen 2
Dit voorbeeld toont hoe je de linker binnenmarge van een cel instelt met behulp van een percentage.
Set right inner padding 1
This example demonstrates how to set the right inner padding of a cell using centimeter values.
Set right inner padding 2
This example demonstrates how to set the right inner padding of a cell using percentage values.
Set top inner padding 1
This example demonstrates how to set the top inner padding of a cell using centimeter values.
Set top inner padding 2
This example demonstrates how to set the top inner padding of a cell using percentage values.

CSS Inner Padding Attribute

Attribute Description
padding Abbreviated property. It is used to set the inner padding properties of an element in a single declaration.
padding-bottom Set the bottom inner padding of the element.
padding-left Set the left inner padding of the element.
padding-right Set the right inner padding of the element.
padding-top Set the top inner padding of the element.