Question

这就是我想要的小鸡盒子：！[] 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>

Answer 1

为什么使用这么多边距来对齐twitter鸟图像或文本。使用尽可能低的利润率。相反，请尝试使用该图像position:absolute;和左上角属性。它会更干净。但有一点需要记住，如果你对元素使用绝对位置，检查它的外部元素或父元素是否定位，如果不是，那么事情可能会变得更糟，那个子元素可能会转移到其他地方。

Answer 2

负利润不是黑客 - W3C甚至说：“允许保证金属性的负值......”

阅读更多：http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

我确实同意这种情况虽然可能过分强调。

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

负上边距不适用于子图像

2 个答案: