Moderator |
|
Padding, margin en border worden opgeteld bij breedtes en hoogtes van divs. Daar moet je dus in omringende divs rekening mee houden. Als de omringende "containers" te klein zijn -of je floatende divs hierin te groot- dan zullen de divs die niet meer passen naar de volgende regel springen.
Zie het volgende voorbeeld:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>box model</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#box1
{
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ccffff;
}
#box2
{
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ffccff;
padding: 10px;
}
#box3
{
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ffffcc;
padding: 10px;
border: 10px solid #0000ff;
}
#box4
{
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ccffcc;
padding: 10px;
border: 10px solid #0000ff;
margin: 10px;
}
</style>
</head>
<body>
<div id="box1">300px, zonder border of padding</div>
<div id="box2">300px, 10px padding</div>
<div id="box3">300px, 10px padding, 10px border</div>
<div id="box4">300px, 10px padding, 10px border, 10px margin</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>box model</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> #box1 { width: 300px; height: 50px; line-height: 50px; text-align: center; background-color: #ccffff; } #box2 { width: 300px; height: 50px; line-height: 50px; text-align: center; background-color: #ffccff; padding: 10px; } #box3 { width: 300px; height: 50px; line-height: 50px; text-align: center; background-color: #ffffcc; padding: 10px; border: 10px solid #0000ff; } #box4 { width: 300px; height: 50px; line-height: 50px; text-align: center; background-color: #ccffcc; padding: 10px; border: 10px solid #0000ff; margin: 10px; } </style> </head> <body> <div id="box1">300px, zonder border of padding</div> <div id="box2">300px, 10px padding</div> <div id="box3">300px, 10px padding, 10px border</div> <div id="box4">300px, 10px padding, 10px border, 10px margin</div> </body> </html>
Daarnaast heeft IE een verkeerde boxmodel-implementatie. Daar wordt de padding en border afgetrokken van de width - alleen de margin komt bovenop de width.
Wanneer je echter (in IE6) een DOCTYPE meegeeft, rendent IE de divs wel in de juiste verhoudingen.
In IE6 en FF ziet dit hetzelfde eruit. Als je de DOCTYPE verwijdert rendert IE de divs verkeerd - probeer dit maar eens uit.
Als je dus snapt hoe de afmetingen van divs werken, kun je prima werken met floats. |