Margin en padding

Oct 09, 2009 No Comments by

Er schijnen nogal wat onduidelijkheden te bestaan over het onderscheid tussen marging en padding in CSS. Toch is het helemaal niet zo complex. Het verschill tussen beide kan op eenvoudige wijze duidelijk gemaakt worden aan de hand van twee afbeeldingen. Stel je voor je hebt een webpagina waarbinnen zich een vierkant bevindt met daarin tekst.

De ruimte tussen de de rand van de webpagina en de vierkant (element) is de ruimte waar de margin plaatsvindt.

Dus de ruimte buiten het element (de vierkant)

De ruimte tussen de tekst (dat kan natuurlijk ook iets anders zijn dan tekst zoals bijvoorbeeld een afbeelding) en de vierkant (element) is de ruimte waar de padding plaatsvindt.

Dus de ruimte binnen de rand van het element (de vierkant) en diens inhoud (in dit geval de tekst “Welkom op onze website!”)

Hopelijk is het verschil tussen margin en padding iets duidelijker geworden :-D .

Cascading Style Sheets, Tutorials

About the author

In 2003 ben ik gestart met webdesignburo Albruna. Reeds jaren daarvoor had ik mijn eerste website gebouwd voor een vereniging waar ik nog altijd lid van ben. Dit beviel mij dusdanig goed, dat ik besloot om er meer mee te doen. Na veel studeren op de diverse webtalen ([X]HTML / CSS / PHP / Javascript / Actionscript) en veel oefenen was het in 2003 dus tijd om het bedrijf op te starten en mij volledig met webdesign bezig te houden. Nu zijn we zeven jaar verder en is het bedrijf niet alleen gegroeid maar zijn er intussen ook in de wereld van webdesign heel wat veranderingen geweest. Het internet blijft wat dat betreft spannend.
No Responses to “Margin en padding”

Leave a Reply

Tweeter button Linkedin button