内联元素锚标记在flexbox的情况下尊重顶部和底部的填充原因？

Question

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

这是我的代码 https://jsbin.com/pepicuvawu/edit?html,css,output

  <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 article中的更多信息。

Answer 2

在这两种情况下都需要填充，但是当display:flex应用了父div来制作子级的flex布局，而在其他情况下则没有结账this以获得更多信息。