没有在周围 div 上填充的情况下，margin-top 无法按预期工作

Question

我在容器 div 内的 div 中有一个图像。当我将 margin-top 应用到图像时，margin 被应用到容器 div 的外部（将容器推）相对于 body 向下。

我可以通过在另一个 div 上应用填充来“修复”这个问题……但我宁愿在图像上留出边距。如果我在另一个（不是容器）div 上应用 1px 填充，那么 margin-top 在将图像向下推时会按预期工作。

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/

我正在使用 Chrome

Answer 1

似曾相识：D 将overflow: hidden; 添加到.other：

.other {
    background: #ccc;
    /*padding: 1px;*/
    overflow: hidden;
}

http://jsfiddle.net/mguQY/2/

Answer 2

使用 padding-top 代替 margin-top