Ruimte Toevoegen met Marges en Opvulling
De eigenschappen margin, padding en border helpen ons om meer ruimte aan elementen toe te voegen, waardoor het uiterlijk, de leesbaarheid en de bruikbaarheid van de webbron worden verbeterd. Laten we elk van deze eigenschappen nader bekijken.
margin- en padding-eigenschappen
padding
padding verwijst naar de ruimte tussen de inhoud van een element en de rand ervan.
padding: top right bottom left
We hebben meerdere manieren om een waarde toe te kennen aan padding.
Shorthand
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Elke padding afzonderlijk
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin verwijst naar de ruimte tussen een element en de aangrenzende elementen. Dit is het gebied buiten de rand van het element.
margin: top right bottom left
We kunnen margin op een paar manieren instellen.
Shorthand
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Elke marge afzonderlijk
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
border-eigenschap
border verwijst naar de lijn die de padding en inhoud van een element omringt. Het is het gebied dat de inhoud van het element scheidt van de marge.
border: width style color;
Shorthand
border: 4px solid brown;
Dit betekent dat de rand aan alle zijden er hetzelfde uitziet. De width is 4px, de style is solid en de color is brown.
Bekijk het volgende voorbeeld en ontdek de mogelijke border-stijlen:
index.html
styles.css
Uitvoer
Elke rand afzonderlijk
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. Wat is het verschil tussen margin en padding in CSS?
2. Wat is het doel van de eigenschap border?
3. Hoe kunnen we verschillende margin-waarden toepassen op verschillende zijden van een element?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain the difference between margin and padding with examples?
What are the possible values for the border-style property?
How do I use shorthand for margin, padding, and border in CSS?
Awesome!
Completion rate improved to 2.56Ruimte Toevoegen met Marges en Opvulling
Veeg om het menu te tonen
De eigenschappen margin, padding en border helpen ons om meer ruimte aan elementen toe te voegen, waardoor het uiterlijk, de leesbaarheid en de bruikbaarheid van de webbron worden verbeterd. Laten we elk van deze eigenschappen nader bekijken.
margin- en padding-eigenschappen
padding
padding verwijst naar de ruimte tussen de inhoud van een element en de rand ervan.
padding: top right bottom left
We hebben meerdere manieren om een waarde toe te kennen aan padding.
Shorthand
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Elke padding afzonderlijk
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin verwijst naar de ruimte tussen een element en de aangrenzende elementen. Dit is het gebied buiten de rand van het element.
margin: top right bottom left
We kunnen margin op een paar manieren instellen.
Shorthand
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Elke marge afzonderlijk
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
border-eigenschap
border verwijst naar de lijn die de padding en inhoud van een element omringt. Het is het gebied dat de inhoud van het element scheidt van de marge.
border: width style color;
Shorthand
border: 4px solid brown;
Dit betekent dat de rand aan alle zijden er hetzelfde uitziet. De width is 4px, de style is solid en de color is brown.
Bekijk het volgende voorbeeld en ontdek de mogelijke border-stijlen:
index.html
styles.css
Uitvoer
Elke rand afzonderlijk
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. Wat is het verschil tussen margin en padding in CSS?
2. Wat is het doel van de eigenschap border?
3. Hoe kunnen we verschillende margin-waarden toepassen op verschillende zijden van een element?
Bedankt voor je feedback!
