Onderstaande eigenaardigheden kunnen het leven van een HTML-er aardig vergallen. Wat dat betreft is Internet Explorer t/m versie 7 ineens je grote vriend want daar treden de hier beschreven grillen niet op. Gelukkig doet versie 8 gewoon mee met Firefox en de rest. Om het nog eens extra lastig te maken komt de weergave in Dreamweaver niet altijd overeen met wat je ziet in de browsers. Dus testen in de browsers (of in Live View) blijft van levensbelang.
Zowel de links (in de oranje en blauwe div) als de alinea (in de groene div) hebben een margin-top en -left van 70 pixels.
Oranje div: de link is een inline element. Deze reageert dus wél op een margin-left (en -right) maar niet op een margin-top (en -bottom).
Blauwe div: hier heeft de link een display: block gekregen. Bij een block-level element wordt de margin-top (en -bottom) wel geëffectueerd. Maar het steekt boven de div uit en het containing block (zoals de blauwe div) gaat dan 70px mee naar beneden. Overigens is dit laatste niet zichtbaar in Dreamweaver en IE7 en ouder, de margin blijft daar binnen de blauwe div. Het effect is pas zichtbaar in de andere browsers (of in Live View).
alinea (block)
Als je het containing block (zoals de groene div) uit de flow van de pagina haalt, bv met een float of een position: absolute, verandert er een en ander. Zo wordt van een ingesloten block-level element (zoals de alinea in de groene div) de margin-top geeffectueerd binnen de div, deze steekt er dan dus niet meer boven uit. In IE7 en ouder verandert er niets want daar was dit al het geval (zie de blauwe div).
De alinea hierboven heeft een clear: left en komt daardoor onder de groene div te staan. Merk ook op dat de standaard margin-top van bovenstaande alinea onder de groene div schuift. In IE7 en ouder is de margin-top van de alinea overigens wel gewoon zichtbaar.
WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen