【HTML】【CSS】如何处理inline-block 元素之间的空白

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

inline-block之间为何会有空白？

在撰写HTML时，由於inline-block有与同类并排在同一行的特性，我们通常会写出这样的程序码：

<a href="#">连结1</a>
<a href="#">连结2</a>

范例网址：https://codepen.io/linchinhsuan/pen/ZEaVEbj

此时两个<a>确实如我们预期的并排了
然而，当我们加上background-color之後会发现，两个<a>之间居然出现了空白
加了CSS reset之後也仍存在
神奇的是，当我们用开发人员工具查看时，会发现那既不是margin也不是padding，但它就是在那

这一切的原因是因为inline-block本身具有的特性：
HTML元素之间的空白、换行及 Tab 字元将占用一格空间

至此，空白的真实身份为何也就很清楚了，在这个范例中就是第一个<a>和第二个<a>之间的「换行」
因此如果我们不换行，例如：

<a href="#">连结1</a><a href="#">连结2</a>

空白就不会出现，但实务上我们通常不会这样做，毕竟为了可读性，换行是必须的

解决方案

范例：https://codepen.io/linchinhsuan/pen/Bamvadd

解法1：将容器的font-size属性设定为0

因为空白的大小取决於容器的font-size属性
因此，我们可以将容器的font-size属性设定为0（让空白大小变成0）来解决
但这个方案会继承到里面的<a>，所以要在子层的<a>再设定一次字体大小。

解法２：直接改变inline-block元素

因为空白的起因是inline-block本身具有的特性
那，如果元素不是inline-block，那不就没问题了吗？
在这个范例中，我们使用display: flex;，让两个<a>变成flex-item，这样就不会有inline-block的问题了

.container2{
    display: flex;
 }