CSS Top Margin Issue

Question

Jul 26, 2011, 08:52 PM

CSS Top Margin Issue

Alguém sabe por que não recebo uma margem superior na primeira div com base no CSS abaixo? Isso renderiza o mesmo no Chrome, Safari e Firefox 4 em execução no Mac OSX Lion (renderizado o mesmo no Snow Leopard). Eu esperaria que o primeiro item fosse exibido com uma margem de 5 px ao redor da div interna (exceto a parte inferior obviamente) e não apenas à direita e à esquerda. Por que a margem também não seria aplicada ao topo? Mesmo se eu especificar margin-top: 5px no CSS, ele ainda não será processado como seria de espera

<!DOCTYPE html>
<html>

    <head>
        <style>
        .outer{
            background-color:red;
            width:100px;
            height:100px;
            margin-bottom:20px;
        }

        .inner{
            background-color:white;
            margin:5px;
        }

        .shim{
            height:1px;
        }

        .outer2{
            background-color:red;
            width:100px;
            height:100px;
            margin-bottom:20px;
            padding:5px;
        }

        .inner2{
            background-color:white;
        }
        </style>
    </head>

    <body>

        <div class="outer">
            <div class="inner">
                Margin
            </div>
        </div>

        <div class="outer">
            <div class="shim"></div>
            <div class="inner">
                Margin+Shim
            </div>
        </div>

        <div class="outer2">
            <div class="inner2">
                Padding
            </div>
        </div>

    </body>

</html>