display inline-block 水平间隙问题

最新推荐文章于 2021-06-08 18:14:35 发布

Abudula__

最新推荐文章于 2021-06-08 18:14:35 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/Abudula__/article/details/81631061

CSS 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了HTML中因换行和空格产生的空白符问题，解释了这些空白符如何在inline-block元素间形成间隙，并提供了两种解决方法：代码不换行和通过设置font-size来消除间隙。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下：

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

.nav {
  background: #999;
}
.nav-item{
  display:inline-block; /* 设置为inline-block */
  width: 100px;
  background: #ddd;
}

效果如下：

我们从效果图中可以看到间隙存在，但我们并没有设置marign-right以及margin-left，那么这个间隙是如何产生的呢？

这是因为我们编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的，且对于多个连续的空白符浏览器会自动将其合并成一个，故产生了所谓的间隙。

对于上面实例，我们在列表 item 元素之间输入了回车换行以方便阅读，而这间隙正是这个回车换行产生的空白符。

同样对于所有的行内元素（inline，inline-block），换行都会产生空白符的间隙。

如何消除空白符

从上面我们了解到空白符，是浏览器正常的表现行为。但是对于某些场景来说，并不美观，而且间隙大小非可控，所以我们往往需要去掉这个空白间隙。一般来说我们有两种方法来去掉这个换行引起间隙：代码不换行和设置 font-size。

代码不换行

我们了解到，由于换行空格导致产生换行符，因此我们可以将上述例子中的列表 item 写成一行，这样空白符便消失，间隙就不复存在了。其代码如下：

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

但考虑到代码可读及维护性，我们一般不建议连成一行的写法。

设置 font-size

首先我们得明确我们想要消除的空白符是什么，空白符其实就是字符，那可以通过font-size来控制其大小.

如果我们把font-size设置为0,文字也会没有，因此我们得找到如何让文字的font-size为我们想要的大小，如16px,14px等，而空白符为0,然后我们知道样式会继承，因此我们就想到了如下的代码。

.nav {
  background: #999;
  font-size: 0; /* 空白字符大小为0 */
}
.nav-item{
  display:inline-block;
  width: 100px;
  font-size: 16px; /* 重置 font-size 为16px*/
  background: #ddd;
}

使用该方法时需要特别注意其子元素一定要重置 font-size，不然很容易掉进坑里（文字显示不出来）。