[HTML][CSS]div w divie z marginesem Opcje

[marcus753]

witajcie ucze się a właściwie przypominam po długiej przerwie html+css robie pewne eksperymenty i natrafiłem na problem którego nierozumiem jeśli ktoś mi go wytłumaczy będę wdzięczny.

robie sobię diva z marginesami 0px wsadzam do niego drugiego diva z marginesami np. 20 px efekt powinien byc taki ze pierwszy div ma margines 0 a drugi powinien byc od niego odsuniety o 20px od gory i z lewej w przegladarkach jednak pierwszy div przejmuje margines drugiego diva i jest odsuniety od góry o 20 px.

Wiecie dlaczego tak się dzieje ?

Pozdrawiam

tak to wygląda w kodzie

[HTML] pobierz, plaintext 
<div style="margin:0px;width:200px; height:200px; background-color:red">
<div style=" margin:30px;width:100px; height:100px; background-color:green">123</div>
123
</div>
[HTML] pobierz, plaintext 

co ciekawe jesli wstawie jakąś zawartość między 1 i 2 divem problem nie występuje::

[HTML] pobierz, plaintext 
<div style="margin:0px;width:200px; height:200px; background-color:red">costam
<div style=" margin:30px;width:100px; height:100px; background-color:green">123</div>
123
</div>
[HTML] pobierz, plaintext 

Jak powinien wyglądać poprawny kod ?mógłbym wstawić   ale to raczej niepoprawne ?

Pozdrawiam