margine superiore in div interno

[piesse78]

Mi sono spesso trovato in difficoltà a causa di questo comportamento diverso di mozilla/firefox rispetto a IE, e ho deciso di sottoporvelo.

XHTML: un div container, e un div titolo che contiene, o meno, del testo

  <div id="container">
    <div id="titolo">
       c
    </div>
  </div>

CSS: il container è rosso e alto 100px, ed è il primo elemento della pagina (nessun margine, né padding).
Il titolo deve avere un margine di 10px, in modo che il testo inizi 10 pixel più in basso del container ma...

* {
   margin: 0;
   padding: 0;
}

#container {
   height: 100px;
   background-color: red;
}

#titolo {
   margin-top: 10px;
}

come vedete dall'allegato, con IE ottengo il risultato voluto, mentre sembra che Mozilla assegni il margine non al titolo bensì al container
:master:

c'è una regola logica per tutto ciò? oppure devo per forza ricorrere ad un hack aggiungendo uno spazio vuoto subito dopo <div id="container"> ?

[Sgurbat]

si è un problema abbastanza fastidioso dei Gecko based, puoi risolvere semplicemente mettendo il padding-top al container.