在 flexbox 的情况下，内联元素锚标记尊重顶部和底部的填充，为什么？ [复制]答案

【问题标题】：inline element anchor tag respect padding top and bottom in case of flexbox why? [duplicate]在 flexbox 的情况下，内联元素锚标记尊重顶部和底部的填充，为什么？ [复制]
【发布时间】：2020-09-11 17:48:04
【问题描述】：

在 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 ?

【问题讨论】：

标签： html css flexbox

【解决方案1】：

嗯，这是因为display: flex 将其子项的显示属性更改为block。从规格：

元素本身不生成任何盒子，但它的子元素和伪元素仍然照常生成盒子。

更多信息在mdn article。

【讨论】：

【解决方案2】：

在这两种情况下都需要填充，但是当display:flex 应用了父 div 时，它会为子级设置 flex 布局，但在其他情况下则没有，请查看 this 以获取更多信息。

【讨论】：