Elk element op een webpagina kan in feite worden voorgesteld als een doos met een bepaalde inhoud, we spreken van de box.
De box bevat van buiten naar binnen volgende onderdelen:
margin - border - padding - inhoud
Voorbeeld: margin - border - padding met list-elementen zonder opsomteken
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Voorbeeld margin, padding en border</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 5px 30px 12px 50px;
padding: 3px 3px 3px 20px;
}
LI {
color: white;
background: blue;
margin: 12px 12px 12px 50px;
padding: 12px 12px 12px 30px;
list-style: none; /* geen opsomteken */
}
LI.metrand {
padding: 0px 12px 0px 0px;
border-style: dashed;
border-width: medium;
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<div style="width:300px; background:gray">
<UL>
<LI>Eerste element
<LI class="metrand">Tweede element, iets langer om wrapping te demonstreren
</UL>
</div>
</BODY>
</HTML>
Opmerkingen:
- voor onder elkaar gepositioneerde blok-elementen schuiven de vertikale margins in elkaar.
- voor inline elementen kan de width eigenschap niet worden ingesteld
- Voor de browsers lager dan IE6 en NS4 worden width en height verkeerd geïmplementeerd en vormen deze de totale breedte en hoogte van de box in plaats van de breedte en hoogte van de inhoud.
- blok-elementen worden standaard vertikaal onder elkaar geplaatst
- inline elementen worden standaard naast elkaar gepositioneerd. Als de inline-box niet op een regel past wordt die gesplitst in meerdere boxen op meerdere regels.
- Aaneengesloten tekst die niet in een inline box wordt geplaatst door de auteur wordt in een anonieme box geplaatst
Voorbeeld:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Voorbeeld margin, padding en border</TITLE>
<STYLE type="text/css">
p { margin-left:10px; background:#FFFF99; width:300px }
p.naarrechts { margin-left:50px}
p.naarbeneden {margin-top:40px}
.roze { background:pink }
.groen {background:green }
</STYLE>
</HEAD>
<BODY>
<p>Een alinea
<p class="naarrechts">Een tweede alinea - naarrechts
<p class="naarbeneden">Een derde alinea - naarbeneden
<p class="naarrechts naarbeneden">Een vierde alinea - naarrechts en naarbeneden
<p class="naarbeneden">Een vijfde alinea - naarbeneden
<p><span class="roze">Een stukje doorlopende tekst met een roze achtergrond</span><span class="groen">Tekst op een groene achtergrond</span>Ik zit in een anonieme inline-box.
</BODY>
</HTML>
