Question

我在容器div中的div中有一个图像。当我在图像上应用margin-top时，边缘会在容器div（推动容器）的外部相对于身体向下施加。

我可以通过在另一个div上应用填充来“修复”这个...但我宁愿在我的图像上留有余量。如果我将1px填充应用到另一个（不是容器）div上，那么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éjàvu：D将overflow: hidden;添加到.other：

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

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

Answer 2

使用padding-top而不是margin-top

margin-top没有按预期工作，没有填充周围的div

2 个答案: