Daniel's Studio.

display为inline-blobk的元素之间的间距

CSS 前端
字数统计: 572阅读时长: 2 min
2020/03/26 Share

现象

当两个display值为inline-block的元素并列时，元素之间会出现神秘的间距。

inline元素也有相同现象。

原因

造成「inline-block」元素空隙的本质是HTML中存在的空白符（white space）。由于对于西文来说，是使用空格作为单词之间的分界的，所以在HTML被解析时，inline或者inline-block元素的标签之间的空格或者换行被看成相当于文字间隙，产生了一些看不见的字符，CSS的white-space属性会作用于这些字符，产生了内容，占据了空间，产生了水平方向上的“间隙”效果；

因此，当inline或者inline-block元素的HTML标签之间存在换行或使用空格分隔的情况下会有间距。

解决方法

假设HTML如下：

1
2
3
4
5
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

方法一：改变HTML结构

既然原因是标签之间的空格（换行）产生的，那么去掉HTML元素之间的空格即可。以下几种结构都是可以的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- 1 -->
<ul>
  <li>item</li><li>item</li><li>item</li>
</ul>

<!-- 2 -->
<ul>
  <li>
    item</li><li>
    item</li><li>
    item</li>
</ul>

<!-- 3 -->
<ul>
  <li>item</li
  ><li>item</li
  ><li>item</li>
</ul>

<!-- 4 -->
<ul>
  <li>item</li><!--
  --><li>item</li><!--
  --><li>item</li>
</ul>

方法二：父元素的font-size属性设为0

但由于font-size是继承属性，需要对所有子元素重新设定需要的font-size

方法三：子元素浮动

对于子元素进行浮动，可以消除之间的间距，但是可能会对于布局产生影响。

方法四：设置letter-spacing或者word-spacing

其中letter-spacing表示字符间距，word-spacing表示单词间距，随便设定一个较大的值即可。

1
2
3
4
5
6
7
8
9
10
11
12
ul{
  letter-spacing: -1000px;
}
li{
  letter-spacing: 0px;
}

/* or */

ul{
  word-spacing: -1000px;
}

参考

去除inline-block元素间间距的N种方法

关于display: inline-block产生的间隙

原文作者：Daniel Xu

原文链接：http://yoursite.com/2020/03/26/display为inline-blobk的元素之间的间距/

发表日期：March 26th 2020, 8:30:06 pm

更新日期：March 26th 2020, 10:00:34 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 现象
  2. 2. 原因
  3. 3. 解决方法
    1. 3.0.1. 方法一：改变HTML结构
    2. 3.0.2. 方法二：父元素的font-size属性设为0
    3. 3.0.3. 方法三：子元素浮动
    4. 3.0.4. 方法四：设置letter-spacing或者word-spacing
  • 4. 参考
    • Total : 24
    2020
    2019
    课程作业 Unity CSS 前端 编程游戏 解谜 MD5 c 云桌面 服务计算 CentOS ssh Docker Go语言 Javascript SPA PoW共识机制 区块链
    3D游戏编程 CSS学习笔记 信息安全 服务计算 Javascript学习笔记 前端学习笔记 区块链