解决行内元素因回车换行产生的空白符（水平间隙）的两种方法

最新推荐文章于 2023-02-15 22:49:58 发布

绵羊万

最新推荐文章于 2023-02-15 22:49:58 发布

阅读量2.2k

点赞数 2

分类专栏： CSS 文章标签：水平间隙空白符

本文链接：https://blog.csdn.net/Allenyhy/article/details/81570743

版权

CSS 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

由于产生的空白符，水平间隙是由于空格和换行造成的（元素节点有文本节点，在缩进代码时会占据宽度）！

如下图所示：

1.代码不换行

根据产生间隙的原理，代码不换行即可解决问题，但是这会导致代码的可读性大大降低，这是十分不推荐的（毕竟代码是给人看的）！！

2.设置font-size

1）在父类元素中设置font-size为0，这样就是使父类元素中文本就不会占据宽度！！

2）重置父类元素的font-size，让其子元素恢复文字字符，（因为在1）去除了所有的文本，包括子元素的文本和空格回车产生的文本节点）

如下图所示：

<html>
<head>
<style type="text/css">
.nav {
  background: #999;
  font-size:0;
}
.nav-item{
  display:inline-block; /* 设置为inline-block */
  width: 100px;
  background: #ddd;
  font-size:14px;
}
</style>
</head>

<body>
<div class="nav">
  <div class="nav-item"><a>导航</a></div>
  <div class="nav-item"><a>导航</a></div>
  <div class="nav-item"><a>导航</a></div>
</div>
</body>
</html>

可以看出间隙没有了！！

本博客由博主原创，如需转载需说明出处！谢谢支持

绵羊万

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决行内元素因回车换行产生的空白符（水平间隙）的两种方法

由于产生的空白符，水平间隙是由于空格和换行造成的（元素节点有文本节点，在缩进代码时会占据宽度）！如下图所示：1.代码不换行根据产生间隙的原理，代码不换行即可解决问题，但是这会导致代码的可读性大大降低，这是十分不推荐的（毕竟代码是给人看的）！！2.设置font-size1）在父类元素中设置font-size为0，这样就是使父类元素中文本就不会占据宽度！！2）重置父类元素的...
复制链接

扫一扫

专栏目录