内联元素锚标签在flexbox的情况下尊重填充顶部和底部，为什么

Question

在flexbox的情况下，为什么内联元素会在顶部和底部填充？

这是我的代码https://jsbin.com/pepicuvawu/edit?html，css，输出

<div class="abc">
<a href="">hello</a>
</div>

css

.abc {
background-color:#eee;
/* display:flex; */
}
.abc a {
padding:10px 20px
}.abc {
background-color:#eee;
/* display:flex; */
}
.abc a {
padding:10px 20px
}

当我在容器上添加display:flex时，然后添加inline element respect of padding-top and bottom why ?

Answer 1

这是因为display: flex将其子级的显示属性更改为block。根据规格：

元素本身不生成任何框，但其子元素和伪元素仍然正常生成框。

mdn文章中的更多信息。

Answer 2

在这两种情况下都需要填充，但当display:flex应用父div时，会对子div进行灵活布局，而在其他情况下则不需要查看此项以获取更多信息。