inline-block元素为何存在边距？如何消除该间隙？

间隙来源 #

这个间隙不是inline/inline-block元素的默认margin或padding，而是HTML代码中元素之间的**空白字符（空格、换行、制表符）**被浏览器渲染成了类似文本空格的间隙。因为inline-block元素兼具块级和行内元素的特性，浏览器会像处理普通行内文本一样，把标签之间的空白解析为空格，所以即使你用*{margin:0;padding:0;}重置样式，也无法消除这个间隙。

消除间隙的实用方法 #

• 移除HTML中的空白字符
  把多个inline-block元素的标签写在同一行，或者用注释消除标签间的空白：

  <!-- 写法1：同一行 -->
  <div></div><div></div><div></div>
  
  <!-- 写法2：注释衔接 -->
  <div></div><!--
  --><div></div><!--
  --><div></div>
  

• 父元素设置font-size: 0
  由于间隙本质是字符空格，给父容器设置font-size: 0可以让空格尺寸变为0，同时记得给子元素恢复需要的字号（如果子元素有文本内容）：

  .parent {
    font-size: 0;
  }
  .parent div {
    font-size: 16px; /* 根据需求调整 */
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
  }
  

• 使用负margin微调
  根据当前字体的空格宽度，给inline-block元素设置负的margin-left（不同浏览器/字体可能需要调整数值，常见为-4px）：

  div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
    margin-left: -4px;
  }
  

• 改用Flexbox布局
  给父元素设置display: flex，直接替代inline-block的排列方式，天然不存在间隙，还能更灵活控制元素对齐、间距等：

  .parent {
    display: flex;
  }
  .parent div {
    width: 100px;
    height: 100px;
    background-color: green;
  }
  

内容的提问来源于stack exchange，提问作者Hanrabong