margin wird auf das Elternelement angewendet

Castordesigns · 01.10.2009

HTML:

	<div id="bg_top">
		<div id="top">
					<div class="moduletabletop_6of12">
						<p>Herzlich Willkommen auf geländespiele.ch,<br />der ersten Geländespiele Community der Schweiz.<br /><br />Bist du Jungscharleiter und auf der Suche nach einem Nachmittagsprogramm für deine Jungs?<br /><br />Gilt es ein spannendes Nachtgeländespiel für das Somerlager vorzubereiten?<br /><br />Oder bist du ein engagiertes Mami oder begeisterter Papi der/das aus dem Kindergeburtstag der Tocher oder des Sohnes etwas ganz besonderes machen möchte?<br /><br />Dann bist du hier genau richtig!</p>		</div>
	
		</div>
	</div><!-- end top-->

Wenn ich jetzt

HTML:

.moduletabletop_6of12 {
    width: 464px;
    height: 268px;
    background: #f9f9f9 url(../images/top_6of12.png) no-repeat;    
    margin-top: 18px;
}

mache, dann wird das margin-top einfach auf BG_TOP übertragen.
also für bg_top habe ich nämlich eine Hintergrundfarbe, und die "rutscht" dann einfach 18px nach unten.

Warum wird das einfach übertragen?
Thx schon im Voraus

xxsiv · 01.10.2009

AW: margin wird auf das Elternelement angewendet

Vielleicht hast du #f9f9f9 in deiner Klasse .moduletabletop_6of12 übersehen und vergessen zu entfernen und denkst jetzt die Farbe ist die ausn BG_TOP.

Denn dein Quellcode verhält sich ganz normal

HTML:

<html>
<head>

<style type="text/css">
*
{
    margin: 0;
    padding: 0;
}
.moduletabletop_6of12 {
    width: 464px;
    height: 268px;
    background: #f9f9f9 url(../images/top_6of12.png) no-repeat;    
    margin-top: 18px;
}
</style>

</head>
<body>

<div id="bg_top" style="border: solid 1px green;">
    <div id="top">
        <div class="moduletabletop_6of12">
            <p>Lorem Ipsum</p>
        </div>
    
    </div>
</div>

</body>
</html>