margin-top不生效问题，父div，子 a

Question

.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的，超不超过似乎没关系

Answer 1

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

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

Answer 2

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

Answer 3

块布局：

.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 个像素，感觉多余的
}