1

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

我可以通过在另一个 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

4

2 回答 2

2

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

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

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

于 2013-04-13T10:17:22.810 回答
1

使用 padding-top 而不是 margin-top

于 2013-04-13T10:15:33.007 回答