CSS Basis

Selectors

Geavanceerd

< >

CSS Padding

In deze tutorial leer je hoe je de ruimte tussen een element aanpast met behulp van CSS.

Dit element heeft een padding van 40px.

CSS padding eigenschap

Met CSS heb je volledige controle over de tussenruimte van een element. Je kunt door gebruik te maken van de eigenschap voor de padding vast leggen hoeveel ruimte er tussen de inhoud van een element en de verschillende randen moet worden vrijgehouden.

Afzonderlijke zijden

Je kunt de padding voor afzonderlijke zijden van een element instellen, zoals de bovenzijde, rechterzijde, onderzijde, en linkerzijde. Door gebruik te maken van de CSS-eigenschappen padding-top, padding-right, padding-bottom en padding-left kun je elke zijde van een element apart instellen.

Voorbeeld:

div {
  padding-top: 40px;
  padding-right: 130px;  
  padding-bottom: 80px;
  padding-left: 20px;
}

Uitproberen

De padding-eigenschappen kunnen worden opgegeven met behulp van de volgende waarden:

length	-	geeft een padding aan in px, em, rem, pt, cm, etc.
%	-	geeft een padding aan in percentage (%) van de breedte van het bevattende element.
inherit	-	geeft aan dat de padding moet worden overgenomen van het bovenliggende element.

Negatieve waarden zijn bij het gebruik van padding niet toegestaan.

Padding shorthand

Om de code in te korten, is het mogelijk om alle padding eigenschappen in één eigenschap op te geven.

De padding eigenschap is een verkorte eigenschap om te voorkomen dat de tussen ruimte van elke zijde afzonderlijk wordt ingesteld, d.w.z. padding-top, padding-right, padding-bottom en padding-left.

Zo ziet de verkorte code eruit:

padding: 40px 130px 80px 20px;

Is het zelfde als:

padding-top: 40px;
padding-right: 130px;  
padding-bottom: 80px;
padding-left: 20px;

Voorbeeld:

div {
  padding: 40px 130px 80px 20px;
}

Uitproberen

De verkorte code kan één, twee, drie of vier door spaties gescheiden waarden aannemen:

Als er één waarde is opgegeven, wordt deze op alle vier de zijden toegepast.

div { padding: 40px; }

Voorbeeld

Als er twee waarden zijn opgegeven, wordt de eerste waarde toegepast op de boven en onderkant en wordt de tweede waarde toegepast op de rechter en linkerkant van het vak van het element.

div { padding: 40px 130px; }

Voorbeeld

Als er drie waarden zijn opgegeven, wordt de eerste waarde toegepast op de bovenkant, de tweede waarde op de rechter en linkerkant en de laatste waarde op de onderkant.

div { padding: 40px 130px 80px; }

Voorbeeld

Als er vier waarden zijn opgegeven, worden deze toegepast op de boven, rechter, onder en linkerkant van het elementvak in de opgegeven volgorde.

div { padding: 40px 130px 80px 20px; }

Voorbeeld

Het wordt aanbevolen om de shorthand eigenschappen te gebruiken, het zal je helpen tijd te besparen door het extra typen te vermijden en zo kun je je CSS-code overzichtelijker houden.

Padding en elementbreedte

De CSS-eigenschap width specificeert de breedte van het inhoudsgebied van het element. Het inhoudsgebied is het gedeelte binnen de padding (opvulling), border (rand) en margin (marge) van een element.

Dus als een element een opgegeven breedte heeft, wordt de padding die aan dat element is toegevoegd, opgeteld bij de totale breedte van het element. We krijgen dan vaak een ongewenste resultaat te zien.

In de onderstaande voorbeeld krijgt het element <div> een breedte van 300px. De werkelijke breedte van het <div> element is eigenlijk 350px (300px + 25px linker-padding + 25px rechter-padding).

Voorbeeld:

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

Uitproberen

Om de breedte op 300px te houden, ongeacht de hoeveelheid padding, kun je de eigenschap box-sizing: gebruiken. Hierdoor behoudt het element zijn werkelijke breedte.

Voorbeeld:

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

Uitproberen

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.