CSS problem

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_problem_207554/page_1 - zur Vollversion wechseln!

vanHell schrieb am 23.05.2009 um 07:32

Wiso wird das innere Element nur von der Seite eingerückt und von oben nicht bzw. wiso wird das äussere Element von oben auch eingerückt?

Code: PHP

<html> 	
<head> 	</head>
<body style="margin:0">
<div style="margin:0;background-color:#f00;width:100px;height:100px"> 			
<div  style="margin:5px;background-color:#0f0;width:50px;height:50px">
</div>
</div>
</body>
</html>

fatmike182 schrieb am 23.05.2009 um 07:36

setze padding auch 0 (im body) und das äußere wird auch nichtmehr oben eingerückt

vanHell schrieb am 23.05.2009 um 07:43

ändert genau nix

that schrieb am 23.05.2009 um 08:33

Ich bin kein CSS-Experte, aber das hier dürfte bei deinem Beispiel zutreffen:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Spikx schrieb am 23.05.2009 um 10:17

Jop, aber warum es eingeführt wurde, also wozu das, in der Form, gut sein soll, verstehe ich überhaupt nicht.

vanHell schrieb am 23.05.2009 um 14:49

So, habs jetzt im IE8 probiert der ja angeblich (als einziger browser) CSS2.1 unterstützt und der rendert es so wie ich es haben will. FF und Safari nicht.
Wie löst man jetzt das ganze? Sollte ja ansich ein alltägliches problem sein.

vanHell schrieb am 23.05.2009 um 16:04

so hab das problem jetzt gelöst. man muss im äussern element padding oder border auf 1px oder größer setzten dan wird das collapsing verhindert und alles richtig dargestellt.

das ganze ist hier genau beschrieben:
http://www.howtocreate.co.uk/tutori...argincollapsing