CSS Padding

De binnenafstand van dit element is 70px.

CSS Padding

CSS padding Deze eigenschap wordt gebruikt om ruimte te maken om de inhoud van het element heen enigen tijd binnen een gedefinieerde grens.

Met CSS kun je de binnenafstanden (vulling) volledig controleren. Er zijn enkele eigenschappen die binnenafstanden voor elke zijde (boven, rechts, onder en links) van een element kunnen instellen.

Padding - afzonderlijke zijden

CSS heeft eigenschappen om binnenafstanden voor elke zijde van een element te specificeren:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Alle binnenafstandseigenschappen kunnen de volgende waarden instellen:

  • length - Specificeer de binnenafstand in eenheid zoals px, pt, cm, etc.
  • % - specificeer de binnenafstand als een percentage van de breedte van het inbegrepen element
  • inherit - specificeer dat de binnenafstand van het ouder-element moet worden geërfd

Tip:Negatieve waarden zijn niet toegestaan.

Voorbeeld

Stel verschillende binnenafstanden in voor alle vier kanten van het <div>-element:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Probeer het zelf

Padding - afkortingseigenschap

Om de code te verkorten, kan je alle binnenafstanden in een eigenschap specificeren.

padding Eigenschap is een verkorte eigenschap voor de volgende binnenvullingseigenschappen:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Het werkingssysteem is als volgt:

Als padding Eigenschap heeft vier waarden:

  • padding: 25px 50px 75px 100px;
    • De bovenste binnenvulling is 25px
    • De rechter binnenvulling is 50px
    • De onderste binnenvulling is 75px
    • De linkse binnenvulling is 100px

Voorbeeld

Gebruik een verkorte eigenschap padding met vier waarden ingesteld:

div {
  padding: 25px 50px 75px 100px;
}

Probeer het zelf

Als padding Eigenschap heeft drie waarden ingesteld:

  • padding: 25px 50px 75px;
    • De bovenste binnenvulling is 25px
    • De rechter en linkse binnenvulling zijn 50px
    • De onderste binnenvulling is 75px

Voorbeeld

Gebruik een verkorte eigenschap padding met drie waarden ingesteld:

div {
  padding: 25px 50px 75px;
}

Probeer het zelf

Als padding Eigenschap heeft twee waarden ingesteld:

  • padding: 25px 50px;
    • De bovenste en onderste binnenvulling zijn 25px
    • De rechter en linkse binnenvulling zijn 50px

Voorbeeld

Gebruik een verkorte eigenschap padding met twee waarden ingesteld:

div {
  padding: 25px 50px;
}

Probeer het zelf

Als padding Eigenschap heeft een waarde ingesteld:

  • padding: 25px;
    • Alle vier de binnenvullingen zijn 25px

Voorbeeld

Gebruik een korte eigenschap padding met een waarde ingesteld:

div {
  padding: 25px;
}

Probeer het zelf

Binnenvulling en elementbreedte

CSS width Eigenschap specificeert de breedte van het inhoudsgebied van het element. Het inhoudsgebied is het deel van het element (doosmodel) binnen de binnenvulling, rand en marge.

Daarom, als een element een gespecificeerde breedte heeft, wordt de binnenvulling toegevoegd aan de totale breedte van het element. Dit is meestal niet het gewenste resultaat.

Voorbeeld

Hier is de breedte van het <div>-element 300px. Maar de werkelijke breedte van het <div>-element is 350px (300px + linkse binnenvulling 25px + rechter binnenvulling 25px):

div {
  width: 300px;
  padding: 25px;
}

Probeer het zelf

Om de breedte vast te houden op 300px, ongeacht de vulling, kun je gebruiken box-sizing Eigenschap. Dit zorgt ervoor dat het element zijn breedte behoudt. Als je de binnenvulling verhoogt, neemt de beschikbare inhoudsruimte af.

Voorbeeld

Gebruik de eigenschap box-sizing om de breedte vast te houden op 300px, ongeacht de vulling:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Probeer het zelf

Meer voorbeelden

Instellen van de linkse binnenvulling
Dit voorbeeld toont hoe je de linkse binnenvulling van een <p>-element instelt.
Instellen van de rechter binnenvulling
Dit voorbeeld toont hoe je de rechter binnenvulling van een <p>-element instelt.
Instellen van de bovenste binnenvulling
Dit voorbeeld toont hoe je de bovenste binnenvulling van een <p>-element instelt.
Instellen van de onderste binnenvulling
Dit voorbeeld toont hoe je de onderste binnenvulling van een <p>-element instelt.

Alle CSS binnenvulling-eigenschappen

Eigenschap Beschrijving
padding Een verkorte eigenschap om alle binnenvulling-eigenschappen in één verklaring in te stellen.
padding-bottom Stel de onderste binnenvulling van het element in.
padding-left Stel de linkse binnenvulling van het element in.
padding-right Stel de rechter binnenmarge van het element in.
padding-top Stel de bovenste binnenmarge van het element in.

Uitbreidende lectuur

Extra boeken:Box model: CSS binnenmarge