负上边距不适用于子图像答案

【问题标题】：Negative top margin will not work on child image负上边距不适用于子图像
【发布时间】：2014-04-30 23:18:30
【问题描述】：

这就是我想要的小鸡盒子的样子：！[]1 出于某种原因，我不能使用负边距让 twitter 图像进入框的中心。我的亲子关系有问题吗？

我的 css 在外部工作表中，但在这里：

<style type="text/css">

#chicklet_container {
    margin:20px auto 0px auto;
    width:540px;
    height:215px;
}

#chicklet_box {
    margin:0px 0px 10px 0px;
    width:190px;
    height:160px;
    border-style:solid;
    border-width:33px 5px 5px 5px;
    border-color:#45BA88;
    position:relative;
}

#chicklet_box2 {
    margin:-30px 0px 10px 0px;
    width:190px;
    height:160px;
    border-style:solid;
    border-width:0px 0px 30px 0px;
    border-color:#3f4040;
}

#chicklet_text {
    text-align:center;
    margin:-196px 0px 0px 0px;
    color:#FFF;
    width:190px;
    font-family:"Verdana, Geneva, sans-serif";
    font-size:27px;
    line-height:20px;
}

#chicklet_text2 {
    text-align:center;
    margin:139px 0px 0px 0px;
    color:#FFF;
    width:190px;
    font-family:"Proxima, Nova, Ultralight";
    font-size:26px;
    line-height:20px;
}

#chicklet_box img {
    margin:-250px 0px auto 5px;
}
</style>

这里是html：

<div id="chicklet_container">
    <div id="chicklet_box">
        <div id="chicklet_box2">
        </div>
            <div id="chicklet_text">Follow Me</div>
            <div id="chicklet_text2">@soandsoandso</div>
            <img src="images/twitter.jpg" alt="">
    </div>
</div>

【问题讨论】：

您能否提供您正在使用的图片的链接，或者至少告诉我们尺寸以便我们进行测试？

标签： css parent-child margin

【解决方案1】：

为什么要使用这么大的边距来对齐 twitter 鸟图像或文本。使用尽可能低的边距。相反，请尝试使用该图像 position:absolute; 和 top ,left 属性。会更干净。但是要记住一件事，如果您对元素使用绝对位置，请检查其外部或父元素是否已定位，如果不是，则情况可能会变得更糟，并且该子元素可能会去其他地方。

【讨论】：

【解决方案2】：

负边距不是 hack - W3C 甚至说：“允许边距属性为负值......”

我同意这种情况，尽管它们可能被过分强调了。

为什么在 Chicklet Box 1 内有 Chicklet Box 2？我假设每个框都代表一个图标......我错了吗？

【讨论】：