Pierre: Wieso verschiebt Margin im div das Mutterelement?

Hallo

hab ein ganz eigenartiges Phänomen, dass mich halb wahnsinnig macht. Ich habe ein div für meinen Header gemacht, wo Logo und eine Textzeile reinkommen. Das div hat ne feste Breite und Höhe und einen Hintergrund. Innerhalb dieses Div möchte ich ein weiteres div oder auch p setzen und mit margin oben und links innerhalb an die richtige Stelle rücken. Sobald ich aber einen margin-top Wert ins innere Div eingebe, wird das Mutterelement um diesen Wert verschoben. Zum Debuggen setze ich dann oft borders um meine Elemente und siehe da, sobald ich dem Muttelement einen Border gebe, passiert das was ich möchte. Und kann mir auch jemand sagen, wieso das nur auf den Abstand von oben und nicht den Abstand von Links einen Einfluss hat?

würd mich tierisch freuen, wenn mir jemand erklären kann wieso das passiert und was ich da nicht checke oder falsch mache.

Hier ist der separierte Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
 <title>Test</title>

<style type="text/css" media="screen">
<!--

body {
margin: 0;
}

#aussen {
width: 400px;
height: 100px;
background: yellow;
/*border: 1px dotted red;*/
}

.innen {
margin: 40px 10px 0 150px;
border: 1px solid gray;
background: #fff;
}-->

</style>
</head>

<body bgcolor="#ffffff">
<div id="aussen">
<div class="innen">Hallo</div>
</div>
</body>

</html>

  1. Hi,

    Ich habe ein div für meinen Header gemacht, wo Logo und eine Textzeile reinkommen. Das div hat ne feste Breite und Höhe und einen Hintergrund. Innerhalb dieses Div möchte ich ein weiteres div oder auch p setzen und mit margin oben und links innerhalb an die richtige Stelle rücken. Sobald ich aber einen margin-top Wert ins innere Div eingebe, wird das Mutterelement um diesen Wert verschoben. Zum Debuggen setze ich dann oft borders um meine Elemente und siehe da, sobald ich dem Muttelement einen Border gebe, passiert das was ich möchte. Und kann mir auch jemand sagen, wieso das nur auf den Abstand von oben und nicht den Abstand von Links einen Einfluss hat?

    Collapsing margins: http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Collapsing margins: http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins

      Tja das isses wohl. Werd ich mich mal durchlesen.

      Kennste zufällig noch ne deutsche Quelle, die das ausführlich beschreibt?

      Besten Dank
      Pierre