为何设置margin-bottom会无效,而margin-top可以-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

a123456678 2016-05-27 14:48:13 1872

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

前端开发
分享到
取消 提交回答
全部回答(2)
  • gloriarll
    2019-07-17 19:17:53

    如果想让图标距离下面30px,可以让父类padding-bottom:30px

    0 0
  • a123456678
    2019-07-17 19:17:53

    这不是定位...

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

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

    0 0
添加回答
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程