解决使用 inline-block 引起的空白间隙问题-CSDN博客

一、解决方法

1. css方法

（1）给父级元素设置`font-size: 0;`

// html
<div class='third'>
    <div class='first-div'></div>
    <div class='second-div'></div>
    <div class='third-div'></div>
</div>
  
// css
.third {
  font-size: 0;  // 这里
}

.first-div, .second-div, .third-div {
  display: inline-block;  // 这里
  height: 100px;
  margin: 0;
}

.first-div, .third-div {
  background: pink;
  width: 50px;
}

.second-div {
  background: red;
  width: calc(100% - 100px);
}
复制代码

（2）使用`letter-spacing`和/或`line-height`

这个方法目前我只在chrome下测试过

// html
<div class='third'>
    <div class='first-div'></div>
    <div class='second-div'></div>
    <div class='third-div'></div>
</div>
<div class='third'>
    <div class='first-div'></div>
    <div class='second-div'></div>
    <div class='third-div'></div>
</div>

// css
.third {
  letter-spacing: -15px;  // 在chrome下测试这个值只要 <= -5 
  line-height: 13px;  // 在chrome下测试这个值只要 <= 13 
} 

.first-div, .second-div, .third-div {
  display: inline-block;
  height: 100px;
}

.first-div, .third-div {
  background: pink;
  width: 50px;
}

.second-div {
  background: red;
  width: calc(100% - 100px);
}
复制代码

没有加letter-spacing和line-height之前长这个样子：

加了letter-spacing之后长这个样子:

加了letter-spacing和line-height之后长这个样子：

2. html方法

(1) 取消标签闭合。但为了兼容IE6/IE7，最后一个标签需要闭合。

值得注意的是，这个方法对div标签无效，也就是对div标签取消闭合，无法获得预想中的表现。

// html
  <div class="demo">
    <span>我是一个span
    <span>我是一个span
    <span>我是一个span
    <span>我是一个span</span>
  </div>
  <ul>
    <li>这是一个li
    <li>这是另一个li
    <li>这是另另一个li
    <li>这是另另另一个li</li>
  </ul>
  
// css
.demo span{
    background:#ddd;
    display: inline-block;
}
ul {
  padding-left: 0;
}
ul li {
  display: inline-block;
}
复制代码

（2）移除标签间的空格

// 方式一：一般来说很少用这种方法，肉眼可见的麻烦
<ul>
    <li>这是一个li</li><li>这是另一个li</li><li>这是另另一个li</li><li>这是另另另一个li</li>
</ul>

// 方式二：在标签结束处消除换行符
<ul>
    <li>这是一个li
    </li><li>这是另一个li
    </li><li>这是另另一个li
    </li><li>这是另另另一个li</li>
</ul>

// 方式三：HTML注释标签
<ul>
    <li>这是一个li</li><!--
    --><li>这是另一个li</li><!--
    --><li>这是另另一个li</li><!--
    --><li>这是另另另一个li</li>
</ul>
复制代码