Css 边缘顶部未按预期工作，周围div上没有填充

我在容器div内部的div中有一个图像。当我将边距顶部应用于图像时，边距将应用于容器div外部（推动容器）相对于主体向下

我可以通过在另一个分区上应用填充来“修复”这个问题。。。但我宁愿在我的形象上留一个空白。如果我在另一个div（不是container）上应用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：

---

我使用的是Chrome

使用padding top而不是margin top

溢出：隐藏至

。其他

：

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

---

请阅读我的解释，页边距彼此重叠。您是否用小提琴示例检查过这一点？看起来不错；是否有任何理由添加

垂直对齐：中间？