H6 - Padding, margin en border

Werk verder in dezelfde stylesheet. Je drie projecten op Portfolio krijgen article-containers en worden het vaste oefenmateriaal voor ruimte, randen en breedtes. De eigen kleuren en achtergrond blijven behouden.

Elk zichtbaar HTML-element kun je zien als een rechthoekige doos. CSS noemt dit het box model. Die doos bestaat uit inhoud, padding, border en margin.

• Content: de inhoud zelf, bijvoorbeeld tekst of een afbeelding.
• Padding: ruimte binnen het element, tussen de inhoud en de rand.
• Border: de rand om padding en inhoud heen.
• Margin: ruimte buiten het element, tussen dit element en andere elementen.

article {
    padding: 20px;
    border: 2px solid black;
    margin: 24px;
}

Onthoud de volgorde van binnen naar buiten: inhoud, padding, border, margin.

Bij padding, margin, border en breedtes gebruik je vaak getallen met een eenheid. Die eenheid vertelt hoe de browser de waarde moet meten.

article {
    padding: 20px;
    width: 80%;
    font-size: 1.2em;
}

• px betekent pixels. Dit is een vaste maat.
• % betekent procent. De maat hangt af van de beschikbare ruimte.
• em hangt af van de tekstgrootte van het element.
• fr kom je later tegen bij CSS Grid. Het betekent een fractie van de beschikbare ruimte.

Voor beginners is dit een handige basis: gebruik px voor vaste afstanden, % voor flexibele breedtes en fr straks voor kolommen in CSS Grid.

Padding is de ruimte aan de binnenkant van een element. Padding duwt de inhoud weg van de rand. Daardoor voelt tekst minder krap.

section {
    background-color: lightyellow;
    padding: 24px;
}

• Meer padding maakt een blok ruimer.
• Padding krijgt dezelfde achtergrondkleur als het element.
• Padding gebruik je vaak bij knoppen, tekstblokken, menu's en kaarten.
• Padding maakt geen afstand tot andere elementen. Daarvoor gebruik je margin.

Margin is de ruimte buiten een element. Margin maakt afstand tussen elementen.

h1 {
    margin-bottom: 32px;
}

p {
    margin-bottom: 16px;
}

• Margin is handig om onderdelen van een pagina uit elkaar te houden.
• Margin hoort niet bij de achtergrondkleur van het element.
• Gebruik margin voor afstand tussen koppen, alinea's, secties en afbeeldingen.
• Gebruik padding voor ruimte binnen een element.

Met border geef je een element een rand. Een border heeft meestal drie onderdelen: dikte, stijl en kleur.

article {
    border: 2px solid black;
}

• 2px is de dikte van de rand.
• solid is de stijl van de rand.
• black is de kleur van de rand.

section {
    border: 1px solid gray;
}

aside {
    border: 4px dashed orange;
}

footer {
    border-top: 3px solid blue;
}

Een rand kan om het hele element staan, maar je kunt ook alleen één kant een rand geven.

Padding, margin en border kun je per kant instellen. De kantnamen zijn: top, right, bottom en left.

section {
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
}

h1 {
    margin-top: 0;
    margin-bottom: 24px;
}

article {
    border-left: 6px solid green;
}

• padding-top geeft binnenruimte aan de bovenkant.
• margin-bottom geeft buitenruimte aan de onderkant.
• border-left geeft alleen links een rand.
• Per kant instellen is duidelijk, maar soms wat lang.

CSS heeft een korte schrijfwijze voor padding en margin. Dat heet shorthand.

section {
    padding: 20px;
}

Eén waarde betekent: alle kanten krijgen dezelfde ruimte.

section {
    padding: 20px 40px;
}

Twee waarden betekenen: eerst boven en onder, daarna links en rechts.

section {
    padding: 10px 20px 30px 40px;
}

Vier waarden lees je met de klok mee: boven, rechts, onder, links.

• padding: 20px; betekent overal 20px padding.
• padding: 20px 40px; betekent boven/onder 20px en links/rechts 40px.
• padding: 10px 20px 30px 40px; betekent boven 10px, rechts 20px, onder 30px, links 40px.
• Deze shorthand werkt ook voor margin.

Als je een breedte instelt met width, lijkt padding soms voor verwarring te zorgen. Standaard telt de browser padding en border bovenop de breedte.

section {
    width: 300px;
    padding: 30px;
    border: 2px solid black;
}

Dit element wordt breder dan 300px, omdat padding en border erbij komen. Daarom gebruiken veel websites deze regel:

* {
    box-sizing: border-box;
}

• Met box-sizing: border-box blijven padding en border binnen de ingestelde breedte.
• Dat maakt layouts voorspelbaarder.
• Deze regel zet je vaak bovenaan je CSS-bestand.

Met margin-left: auto en margin-right: auto kun je een blok horizontaal centreren. Het element moet dan wel een breedte hebben.

main {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

Dit schrijf je vaak korter:

main {
    width: 800px;
    margin: 0 auto;
}

• 0 betekent: boven en onder geen margin.
• auto betekent: links en rechts automatisch verdelen.
• De browser verdeelt de overgebleven ruimte links en rechts gelijk.

Later leer je ook max-width. Dat is vaak beter dan een vaste breedte, omdat een pagina dan makkelijker op kleinere schermen past.

Bij verticale margins kan iets gebeuren dat beginners vaak verwarrend vinden: margins kunnen samenklappen. Dat heet margin collapse.

h1 {
    margin-bottom: 40px;
}

p {
    margin-top: 20px;
}

Je verwacht misschien 60px ruimte tussen de kop en de alinea. In sommige situaties wordt dat geen 60px, maar 40px. De grootste margin wint dan.

• Dit gebeurt vooral bij verticale margins: boven en onder.
• Horizontale margins, links en rechts, klappen niet op dezelfde manier samen.
• Gebruik bij eenvoudige layouts vaak één richting voor verticale afstand, bijvoorbeeld vooral margin-bottom.
• Padding klapt niet samen. Padding blijft gewoon binnen het element.

In dit voorbeeld krijgt de pagina rustige ruimte, een gecentreerd hoofdgedeelte en duidelijke tekstblokken.

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 32px;
    background-color: #eeeeee;
    color: #222222;
}

main {
    max-width: 800px;
    margin: 0 auto;
}

article {
    padding: 24px;
    margin-bottom: 24px;
    background-color: white;
    border: 1px solid #cccccc;
}

h1 {
    margin-top: 0;
    margin-bottom: 24px;
}

p {
    margin-top: 0;
    margin-bottom: 16px;
}

• body krijgt padding zodat de pagina niet tegen de rand van het scherm plakt.
• main wordt gecentreerd met margin: 0 auto.
• article krijgt padding aan de binnenkant.
• article krijgt margin aan de onderkant om afstand tot het volgende blok te maken.
• h1 en p krijgen gecontroleerde margins, zodat de ruimte voorspelbaar is.