如何解决内联元素锚标记在flexbox的情况下尊重顶部和底部的填充原因?
在flexbox情况下,为什么内联元素将填充放在顶部和底部?
这是我的代码 https://jsbin.com/pepicuvawu/edit?html,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 ?
解决方法
好吧,这是因为display: flex
将其子级的显示属性更改为block
。根据规格:
元素本身不会生成任何框,但是其子元素和伪元素仍会正常生成框。
mdn article中的更多信息。
,在这两种情况下都需要填充,但是当display:flex
应用了父div来制作子级的flex布局,而在其他情况下则没有结账this以获得更多信息。