html - flex 盒包装后保持一个间隙

This question already has answers here:

Mystery white space underneath image tag [duplicate]
（3个答案）
12个月前关闭。
不知什么原因，我在包装后的图像之间出现了这种间隙

请参见此处的示例代码：
https://codepen.io/mohammad-hossein-amri/pen/NEpzro
但我想要的结果应该是这样

我几乎什么都试过了，还有差距。不知怎么的，这额外的空间被添加到包装后的图像之间

html, body{
    background: #fff;
    padding:0; margin:0;
    height:100%;
}

ul#flex-container{
    list-style-type: none;
    margin:0; padding: 0;
    display: flex;
    flex-wrap: wrap;
}

ul li{
    margin:0; padding: 0;
    flex-grow: 1;
    width:250px;
    color: #fff;
    font-size: 2.2em;
    position: relative;
}
ul li img{
    width: 100%;

}

a{
    margin: 0;
    padding: 0;
}

  <div>
    <ul id="flex-container">
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1532304887200-8db8cf689891?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c00cde864c07aaffc35fb0b5567015e&auto=format&fit=crop&w=500&q=60" alt="">

        </a>
      </li>

      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1484849764956-0988adac7e5c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81b2754a46f790afd076f2293820c487&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1489832049190-666d39b40b7e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dbc2c8c1720440ddfc6618eccd9f1656&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1535966092542-fcdb19e1ea4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=28c12f97d6789fc30a2755b983293905&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1512238701577-f182d9ef8af7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c396959d87964c1b361672856f73c67b&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1512341875699-0b87026a8d5e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6119da2cefcae7d1a886c7ce698abef&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
    </ul>
  </div>

更新
我看到其他人用相同的答案标记了另一个问题，但是这个问题没有出现在谷歌搜索中，因为它与flex无关。不同的症状，但相同的解决方案不会使问题相互重复！

最佳答案

设置font-size: 0;时，纯空白节点不会占用任何空间：

html, body{
    background: #fff;
    padding:0; margin:0;
    height:100%;
}

ul#flex-container{
    list-style-type: none;
    margin:0; padding: 0;
    display: flex;
    flex-wrap: wrap;
}

ul li{
    margin:0; padding: 0;
    flex-grow: 1;
    width:250px;
    color: #fff;
    font-size: 0;
    position: relative;
}
ul li img{
    width: 100%;

}

a{
    margin: 0;
    padding: 0;
}

  <div>
    <ul id="flex-container">
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1532304887200-8db8cf689891?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c00cde864c07aaffc35fb0b5567015e&auto=format&fit=crop&w=500&q=60" alt="">

        </a>
      </li>

      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1484849764956-0988adac7e5c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81b2754a46f790afd076f2293820c487&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1489832049190-666d39b40b7e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dbc2c8c1720440ddfc6618eccd9f1656&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1535966092542-fcdb19e1ea4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=28c12f97d6789fc30a2755b983293905&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1512238701577-f182d9ef8af7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c396959d87964c1b361672856f73c67b&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1512341875699-0b87026a8d5e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6119da2cefcae7d1a886c7ce698abef&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
    </ul>
  </div>

关于html - flex 盒包装后保持一个间隙，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53302274/