ik heb 2 geneste divjes. ik wil dat rondom de binnenste div een rand van 10px vrij blijft tov de buitenste. dat kan ik op twee manieren doen: ofwel ik geef de buitenste div een padding van 10px, ofwel ik geef de binneste div een margin van 10px. Als ik echter de binneste div een margin van 10px geef, gaat in IE alles goed, maar lijkt in firefox de top margin toegepast te worden op de buitenste div ipv op de binnenste
screenshot:
dit is de code waar het om gaat:
wanneer ik aan div.col1 een float: left meegeef is het probleem opgelost, maar ik wil toch graag weten waar dit vandaan komt. Iemand een idee?
screenshot:
dit is de code waar het om gaat:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>margin vs padding</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div.mainbox {
margin: 0 0 10px;
height: 100px;
background: #000;
}
div.haspadding {
padding: 10px;
height: 80px;
}
div.col1 {
margin:0;
padding: 0;
width: 80px;
height: 80px;
background: #fc0;
}
div.hasmargin {
margin: 10px;
}
div.seperator {
margin: 0;
background: #f00;
}
</style>
</head>
<body>
<div class="mainbox haspadding">
<div class="col1">
dmv padding buitenste div
</div>
</div>
<div class="seperator">
divje om te zorgen dat collapsende margins het probleem niet deels verbergen
</div>
<div class="mainbox">
<div class="col1 hasmargin">
dmv margin binnenste div
</div>
</div>
</body>
</html> |
wanneer ik aan div.col1 een float: left meegeef is het probleem opgelost, maar ik wil toch graag weten waar dit vandaan komt. Iemand een idee?