微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

删除display:flex会在链接周围添加空格为什么?

如何解决删除display:flex会在链接周围添加空格为什么?

这是因为flexbox删除inlineinline-block元素之间的默认空白。

这是没有flexbox的代码,其中有空格:

.box {

  font-size:30px;

}


<div class="box">

  <a>click</a>

  <a>here</a>

</div>

我们可以通过从标记中删除它或使用任何常用方法来删除该空白:

.box {

  font-size:30px;

}


<div class="box">

  <a>click</a><a>here</a>

</div>

或通过使div成为flexbox容器:

.box {

  display:flex;

  font-size:30px;

}


<div class="box">

  <a>click</a>

  <a>here</a>

</div>

如果我们检查规格:

flex容器的每个流入子元素都将成为一个flex项目,并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是, (即可能受white-space属性影响的字符) 空格(就像其文本节点显示为:none一样)。

因此,在我们的代码中,我们有两个子项和一个不带空格的空白序列。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。