H5W3
当前位置:H5W3 > 问答 > 正文

margin-top不生效问题


.page-foot {
display: inline-block;
border: 0px;
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
}
.a-download {
pointer-events: none;
text-decoration:none;
color: #FFFFFF;
background-color: #1890ff;
border-color: #1890ff;
padding: 10px;
margin-top: 10px;
}
<div class="page-foot">
<a href="http://www.baidu.com"
class="a-download"
target="_blank" >下载</a>
</div>

里面的块超过了外面的块,不用浮动,position怎么解决,网上的方法试过了都没用,当然我最终是要flex的,超不超过似乎没关系

回答

块布局:

.page-foot {
 display: inline-block;
 border: 0px;
 width: 100%;
 height: 50px;
 position: fixed;
 bottom: 0;
}

改为弹性布局:

.page-foot {
 display: flex; // 重点这里
 border: 0px;
 width: 100%;
 height: 50px;
 position: fixed;
 bottom: 0;
}
.a-download {
 pointer-events: none;
 text-decoration:none;
 color: #FFFFFF;
 background-color: #1890ff;
 border-color: #1890ff;
 padding: 10px;
 margin-top: 10px; // 生效,距离上边距多 10 个像素,感觉多余的
}

a标签是行内元素,margin只有左右有效,上下无效。把a标签的样式也加上inline-block即可。

.a-download{
  display:inline-block;
}

不生效是因为a默认是行内元素,想要margin-top生效就要把a变成块或者行内块

未经允许不得转载:H5W3 » margin-top不生效问题

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址