De eigenschappen margin en padding.

Bron: http://www.sceneone.nl/positionering/margin.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

De eigenschappen margin en padding die je aan html elementen kunt toekennen zijn twee van de meest bruikbare eigenschappen om je elementen tot op de pixel nauwkeurig te positioneren.
Om te beginnen is het goed te weten wat een margin is en wat een padding en dat html elementen al een margin en soms een padding van zichzelf hebben. Bekijk het volgende voorbeeld maar eens:

CSS: .p1{
border: 1px solid #D12003;
background: #FDE3DF;
}

.p2{
border: 1px solid #D12003;
background: #FDE3DF;
}

.list1{
border: 1px solid #D12003;
background: #FDE3DF;
}
HTML: <p class="p1">Dit is de eerste paragraaf. Ik heb in de css niets veranderd aan de margin of aan de padding</p>
<p class="p2">En de tweede paragraaf. Ook deze heeft niets meer of minder dan zijn 'natuurlijke' margin en padding. En aan de list die hieronder volgt heb ik (zoals je kunt zien in de css) ook niets veranderd wat betreft de margin of padding</p>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

bekijk het resultaat
N.B.: om het voorbeeld goed te kunnen bekijken moet je het bekijken met Firefox. Internet Explorer doet af en toe hele rare en onverwachte dingen met de 'natuurlijke' positionering van elementen. We kunnen rustig zeggen: wat IE laat zien is fout, wat Firefox laat zien is goed!

Wat gebeurd er nu precies? Om je dat goed uit te kunnen leggen haal ik er hier nog een keer een screenshot van het resultaat van de bovenstaande code bij:

screenshot van het voorbeeld over margin en padding

De padding

Ieder html element neemt een bepaalde hoeveelheid ruimte in beslag. Hoeveel dit is in het geval van dit voorbeeld kun je zien aan de rode kaders. Je ziet dat een paragraaf niet veel meer ruimte nodig heeft dan de ruimte voor de hoeveelheid tekst die jij erin typt: het rode kader sluit nauw aan op de tekst.
Bij het list element zie je dat hij aan de linkerkant wat meer ruimte neemt dan hij nodig heeft (aangegeven met het cijfer 2). We noemen deze ruimte de linker padding.

De margin

Verder zie je dat de verschillende elementen buiten hun eigen ruimte er ook voor zorgen dat ze een bepaalde afstand tot elkaar houden. Dit zijn de witruimten aangegeven met de cijfers 1. We noemen deze ruimte de margin.

Elk element bevindt zichzelf in zijn eigen box. Wil je voor een element wat meer ruimte binnen die box maken dan doe je dat met padding. Wil je voor een bepaald element wat meer ruimte om de box van dat element heen maken dan doe je dat met margin.

Nog een voorbeeld

Laten we de code uit het voorgaande voorbeeld nog een keer gebruiken, maar nu gaan we de tweede paragraaf een padding geven en de list een margin.

CSS: .p1{
border: 1px solid #D12003;
background: #FDE3DF;
}

.p2{
border: 1px solid #D12003;
background: #FDE3DF;
padding: 10px 20px 10px 20px; /* boven rechts onder links */
}

.list1{
border: 1px solid #D12003;
background: #FDE3DF;
margin: 50px 200px 0 0; /* boven rechts onder links */
}
HTML: <p class="p1">Dit is de eerste paragraaf. Ik heb in de css niets veranderd aan de margin of aan de padding</p>
<p class="p2">En de tweede paragraaf. Aan deze paragraaf heb ik nu een padding gegeven, hij zal dus iets ruimer binnen zijn eigen box komen. En aan de list die hieronder volgt heb ik een margin gegeven, hij zal dus iets meer witruimte om zichzelf heen maken maar buiten zijn eigen box.</p>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

bekijk het resultaat
N.B.: bekijk het voorbeeld met Firefox.

Hieronder nog even een screenshot van het resultaat (in Firefox).
Je ziet dat de tweede paragraaf een stuk losser in z'n jasje zit en dat het list element de nodige witruimte om zich heen gekregen heeft.
Je bent misschien in verwarring door de manier van noteren van de padding en margin in het css? Je kunt hier meer lezen over het schrijven van css.

screenshot van het tweede voorbeeld over margin en padding
Ik heb hier in een notendop uitgelegd wat margin en padding zijn en hoe je er gebruik van kunt maken. Ik hoop dat het duidelijk is dat je op deze manier ieder html element tot op de pixel nauwkeurig kunt positioneren.
Je hebt geen 15 <br /> tags achter elkaar nodig om witruimte te maken en ook geen tabellen volgepropt met fillertjes om de elementen op je pagina te positioneren.

naar het begin van de pagina