CSS 消除 inline-block 元素间的间隙

Unsplash

关于什么是 inline-block 元素间的间隙，我们先来看个简单的例子

#left {
  background-color: coral;
  display: inline-block;
  width:100px;
  height:100px;
}
#center {
  background-color: lightblue;
  display: inline-block;
  width:100px;
  height:100px;
}
#right {
  background-color: khaki;
  display: inline-block;
  width:100px;
  height:100px;
}

<ul id="main">
  <li id="left">left</li>
  <li id="center">center</li>
  <li id="right">right</li>
</ul>

运行结果

从上图的运行结果可以看到，添加 display: inline-block; 属性后，水平呈现的元素间产生了空隙，出现这一现象的本质是，HTML 中存在的空白符 (whitespace) ，空白符包括空格，TAB 和回车，解决的办法有：

a. 删掉空格
元素间出现空隙的原因，是因为标签段之间存在空格，只要我们把 HTML 中的空格去掉后，空隙自然就不存在了，下面提供三种去掉空格的方式：

<ul id="main">
  <li id="left">left</li><li id="center">center</li><li id="right">right</li>
</ul>

<ul id="main">
  <li id="left">left
  </li><li id="center">center
  </li><li id="right">right</li>
</ul>

<ul id="main">
  <li id="left">left</li><!--
  --><li id="center">center</li><!--
  --><li id="right">right</li>
</ul>

运行结果

b. 跳过结束标签
在 HTML5 中该方法不受影响，若是在低版本的 IE 浏览器，可能会出现无法识别的问题，只需要在最后一个列表项上加上闭合标签即可

<ul id="main">
  <li id="left">left
  <li id="center">center
  <li id="right">right
</ul>

运行结果

c. 使用负边距
需要根据父元素来确定要使用多少个像素值，这个例子中，我们使用 -8px 就能够让三个元素贴在一起了

#left {
  margin-right: -8px;     
}
#center {
  margin-right: -8px;
}

运行结果

d. 使用负值字符间距
letter-spacing 属性的作用是增加或减少字符间的空白，在这个例子当中，我们在父级添加该属性即可达到消去间隙的作用

#main {
  letter-spacing: -8px;
}

运行结果 1

根据运行结果，我们发现，子项继承父级属性之后，文本内容都堆叠在了一起，所以我们还要在子项中添加 letter-spacing: 0; 属性

#left {
  letter-spacing: 0;
}
#center {
  letter-spacing: 0;
}
#right {
  letter-spacing: 0;
}

运行结果 2

类似的属性还有 word-spacing，该属性是用来定义元素中字之间插入多少空白符，在父级直接添加该属性即可完成我们想要的效果，子项不需要添加其他属性

#main {
  word-spacing: -8px;
}

运行结果

e. 将字体大小设置为 0
该方法是在父级元素中添加 font-size: 0; 属性，但是子元素也会继承父级 0 字体大小的属性，无法显示出文本内容

#main {
  font-size: 0;
}

运行结果 1

若是想要子元素的文本内容呈现出来，只需在每个子项里设置 font-size 属性即可

#left {
  font-size: 16px;
}
#center {
  font-size: 16px;
}
#right {
  font-size: 16px;
}

运行结果 2

f. 使用 Flex 弹性盒
关于 Flex 弹性盒，在该篇博文 CSS 布局_2 Flex弹性盒 中有着详细的介绍，在这里只是提供一个解决方法

#main {
  display: flex;
}
#left {
  flex-basis: 100px;
}
#center {
  flex-basis: 100px;   
}
#right {
  flex-basis: 100px;
} 

运行结果

g. 使用浮动

#left {
  float: left;
}
#center {
  float: left;
}
#right {
  float: left;
}

运行结果

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^