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

时间:2020-09-11 07:17:31

标签: html css flexbox

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

2 个答案:

答案 0 :(得分:1)

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

元素本身不会生成任何框,但是其子元素和伪元素仍会正常生成框。

mdn article中的更多信息。

答案 1 :(得分:0)

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