padding
padding:
Padding is een CSS eigenschap die wordt gebruikt om de binnenruimte van een element te definiëren. De waarde van deze eigenschap is de afstand van de content tot de rand van het element. Padding kan worden gebruikt om het uiterlijk van een webpagina te beïnvloeden en om de leesbaarheid van de inhoud te verbeteren.
Voorbeelden:
- padding: 10px 20px 30px 40px;
- padding: 10px 20px;
- padding: 10px;
Toepassing:
<DIV style="padding: 10px;">
Voorbeeldtekst
</DIV>
padding-bottom
padding-bottom:
Padding-bottom is een CSS eigenschap die wordt gebruikt om de onderkant van een element te definiëren. De waarde van deze eigenschap is de afstand van de content tot de onderkant van het element. Padding-bottom kan worden gebruikt om het uiterlijk van een webpagina te beïnvloeden en om de leesbaarheid van de inhoud te verbeteren.
Voorbeelden:
- padding-bottom: 10px;
- padding-bottom: 15em;
Toepassing:
<DIV style="padding-bottom: 15em;">
Voorbeeldtekst
</DIV>
padding-left
padding-left:
De padding-left property definieert de linker-padding van een element. De linker-padding is de ruimte tussen het linkerrand van het element en de inhoud van het element;
Voorbeelden:
- padding-left: 5px;
- padding-left: 2em;
- padding-left: 25%;
Toepassing:
<DIV style="padding-left: 25%;">
Voorbeeldtekst
</DIV>
padding-right
padding-right:
De padding-right property definieert de rechter-padding van een element. De rechter-padding is de ruimte tussen het rechterrand van het element en de inhoud van het element;
Voorbeelden:
- padding-right: 5px;
- padding-right: 2em;
- padding-right: 25%;
Toepassing:
<DIV style="padding-right: 25%;">
Voorbeeldtekst
</DIV>
padding-top
padding-top:
De padding-top property definieert de boven-padding van een element. De boven-padding is de ruimte tussen het bovenrand van het element en de inhoud van het element;
Voorbeelden:
- padding-top: 5px;
- padding-top: 2em;
- padding-top: 25%;
Toepassing:
<DIV style="padding-top: 25%;">
Voorbeeldtekst
</DIV>
all
all:
De property all is een shorthand-property waarmee je alle andere eigenschappen van de elementen in de selectie kunt aanpassen. Alle eigenschappen die gereset worden door browsers, zoals margin, border, padding, font-style, font-variant en letter-spacing, worden geregeld door deze property.
Voorbeelden:
- all: initial;
- all: unset;
- all: inherit;
- all: revert;
Toepassing:
<DIV style="all: revert;">
Voorbeeldtekst
</DIV>
background-clip
background-clip:
De background-clip property bepaalt hoe de achtergrond image (background) tot een element moet worden beperkt. Deze property verwijst naar de plaats waar de achtergrond image gesneden moet worden. De achtergrondimage kan worden beperkt tot het element zelf, het padding gebied, of het content gebied.
Voorbeelden:
- background-clip: border-box;
- background-clip: padding-box;
- background-clip: content-box;
Toepassing:
<DIV style="background-clip: content-box;">
Voorbeeldtekst
</DIV>
box-sizing
box-sizing:
box-sizing stelt ons in staat om de padding, border-width en content-width te definiëren voor het element waar deze property op wordt toegepast. Met deze property kunnen we de afmetingen van het element aanpassen zonder dat er fouten optreden.
Voorbeelden:
- box-sizing: border-box;
- box-sizing: content-box;
- box-sizing: padding-box;
Toepassing:
<DIV style="box-sizing: padding-box;">
Voorbeeldtekst
</DIV>