Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Marge en Opvulling Eenvoudig Uitgelegd | Het Boxmodel en Afstand
CSS-Grondbeginselen

bookMarge en Opvulling Eenvoudig Uitgelegd

Veeg om het menu te tonen

Je weet dat elk element inhoud, opvulling, rand en marge heeft. Laten we bekijken hoe je de afstand kunt regelen met deze eigenschappen.

Padding

Padding creëert ruimte binnenin het element, tussen de inhoud en de rand.

.box {
  padding: 20px;
}

Dit voegt 20px opvulling toe aan alle vier de zijden.

Padding Shorthand

Padding kan worden geschreven met behulp van een verkorte notatie.

De volgorde van de waarden is altijd: boven → rechts → onder → links

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Individuele Padding-eigenschappen

Elke zijde afzonderlijk instellen:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;

Margin

Margin creëert ruimte buiten het element, tussen het element en andere elementen.

.box {
  margin: 20px;
}

Margin Shorthand

Margin gebruikt dezelfde shorthand-regels als padding:

margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 10px 20px 5px; /* top | left/right | bottom */
margin: 10px 15px 20px 25px; /* top | right | bottom | left */

Individuele marge-eigenschappen

Kunnen ook afzonderlijk worden ingesteld:

margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

Rand

De rand bevindt zich tussen de opvulling en de marge.

Basisverkorte notatie:

border: 4px solid brown;

Dit definieert: breedte, stijl, kleur.

Veelvoorkomende randstijlen zijn solid, dotted, dashed en double.

Het is ook mogelijk om afzonderlijke zijden aan te passen indien nodig:

border-top: 2px solid black;

Bekijk het volgende voorbeeld en bepaal de mogelijke randstijlen:

index.html

index.html

styles.css

styles.css

copy

Uitvoer

Note
Belangrijk verschil

Padding:

  • Voegt ruimte toe binnen het element;
  • Vergroot het achtergrondgebied.

Margin:

  • Voegt ruimte toe buiten het element;
  • Heeft geen invloed op de achtergrond van het element.

1. Welke zijde krijgt 40px in de volgende declaratie?

2. Welke eigenschap voegt ruimte toe binnen een element, tussen de inhoud en de rand?

question mark

Welke zijde krijgt 40px in de volgende declaratie?

Select the correct answer

question mark

Welke eigenschap voegt ruimte toe binnen een element, tussen de inhoud en de rand?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Sectie 3. Hoofdstuk 2
some-alt