css - 周囲の div をパディングしないと、margin-top が期待どおりに機能しない

Question

コンテナ div 内の div に画像があります。画像に margin-top を適用すると、マージンはコンテナー div の外側 (コンテナーをプッシュする) にボディに対して下に適用されます。

他の div にパディングを適用することでこれを「修正」できますが、画像に余白が必要です。他の (コンテナーではない) div に 1px のパディングを適用すると、マージントップはイメージを押し下げる際に期待どおりに機能します。

CSS:

body {
    background: #bada44
}
.container {
    background: #776;
}
.other {
    background: #ccc;
    /*padding: 1px;*/
}
img {
    width: 33%;
    display: block;
    margin: 0 auto;
    margin-top: 30px;
}

HTML

<div class="container">
    <div class="other">
        <img src="something.jpg" />
    </div>
</div>

jsFiddle: http://jsfiddle.net/mguQY/1/

私はクロムを使用しています