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

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;”却不能达到同样的效果？