Ik kom vaak iets tegen als ik met CSS bezig ben, wat volgens mij een bug is, maar alle browsers doen het en ik hoor er nooit iemand anders over. Ben ik gek, zie ik iets heel doms over het hoofd, of is dit inderdaad eigenlijk fout gedrag?
(let op: ik ben dus NIET op zoek naar een oplossing, want dat lukt me zelf ook wel, in het voorbeeld bijv. door padding i.p.v. margin te gebruiken, maar naar een verklaring van het gedrag, of een verklaring dat ik gek en/of zeer dom ben)
Als ik het ene element in het andere zet, dan wordt de top en bottom margin van het binnenste element, toegepast op het buitenste.
Stel ik doe:
en:
(zie hier)
Dan zou je verwachten dat je bovenaan een rood vlak krijgt, met daarin de koptekst, met 30 pixels ruimte aan alle kanten. Dan meteen daaronder het blauwe vlak.
In plaats daarvan, sluit de tekst strak aan op de boven- en onderrand van de rode DIV en komt er 30 pixels witruimte boven en onder de DIV. Anders gezegd: de margin van de H1 valt buiten de DIV waar hij in zit. In de horizontale richting werkt het wel naar verwachting (de margin valt binnen de DIV en is dus rood en niet wit).
Heeft iemand enig idee waarom dit zo werkt? Dit simpele voorbeeld geeft in alle browsers hetzelfde resultaat, maar in ingewikkeldere designs krijg je soms verschillend gedrag in verschillende browsers door hetzelfde probleem.
(let op: ik ben dus NIET op zoek naar een oplossing, want dat lukt me zelf ook wel, in het voorbeeld bijv. door padding i.p.v. margin te gebruiken, maar naar een verklaring van het gedrag, of een verklaring dat ik gek en/of zeer dom ben)
Als ik het ene element in het andere zet, dan wordt de top en bottom margin van het binnenste element, toegepast op het buitenste.
Stel ik doe:
HTML:
1
2
3
4
5
6
| <body> <div> <h1>Een kop</h1> </div> <div id="blauwvlak"> </div> </body> |
en:
Cascading Stylesheet:
1
2
3
4
| body {margin:0;} div {background:#F00;} h1 {margin:30px;} #blauwvlak {width:100%; height:200px; background:#00F;} |
(zie hier)
Dan zou je verwachten dat je bovenaan een rood vlak krijgt, met daarin de koptekst, met 30 pixels ruimte aan alle kanten. Dan meteen daaronder het blauwe vlak.
In plaats daarvan, sluit de tekst strak aan op de boven- en onderrand van de rode DIV en komt er 30 pixels witruimte boven en onder de DIV. Anders gezegd: de margin van de H1 valt buiten de DIV waar hij in zit. In de horizontale richting werkt het wel naar verwachting (de margin valt binnen de DIV en is dus rood en niet wit).
Heeft iemand enig idee waarom dit zo werkt? Dit simpele voorbeeld geeft in alle browsers hetzelfde resultaat, maar in ingewikkeldere designs krijg je soms verschillend gedrag in verschillende browsers door hetzelfde probleem.
/u/15038/logo.GIF?f=community){kind=logo}
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}