为何设置margin-bottom会无效，而margin-top可以

Question

效果图

---

html

<div class="weblink ri"><!--右边3个icon-->
    <ul>
        <li><a href="#"><img src="images/mail_ic.png"></a></li>
        <li><a href="#"><img src="images/local_ic.png"></a></li>
        <li style="border:none;"><a href="#"><img src="images/tel_ic.png"></a></li>
    </ul>
</div>

---

css

.weblink{
    margin-right: 32px;
}
.weblink li{
    float: right;
    border-left: 1px solid #bcbec3;
    text-align: center;
    width: 70px;
    margin-top: 127px;
    /*border: 1px solid black;*/
}
.weblink a{
    display: block;
    /*border: 1px solid red;*/
}

---

为何设置“margin-top: 127px;”时可以让icon距离上边127像素
而设置“margin-bottom: 30px;”却不能达到同样的效果？

Answer 1

这不是定位...

margin-bottom是下方的外边距，并不能让元素向下方移动，margin-top作为上边距，把元素“推”了下去。

题主的意思想必是希望图标距离下方30px，那么可以试试在ul上设置position: absolute，bottom: 30px，另外父元素position:relative

Answer 2

用负值试一下margin-bottom:-30px;