图片间空隙的解决办法

今天写代码的时候碰到的一个问题，当我准备写一列图片时，也就是这样

<ul>
    <li>![](../image/task3-groupmember.jpg)</li>
    <li>![](../image/task3-groupmember.jpg)</li>
    <li>![](../image/task3-groupmember.jpg)</li>
    <li>![](../image/task3-groupmember.jpg)</li>
</ul>

效果是这样：

突然发现每张图片之间居然有一道缝隙，我打开调试器，发现并不存在内边距、外边距的情况

有小伙伴提示我在html随便写几张并列的图片试试

  ![](../image/task3-groupmember.jpg)
  ![](../image/task3-groupmember.jpg)
  ![](../image/task3-groupmember.jpg)
  ![](../image/task3-groupmember.jpg)

效果是这样：

同样是存在了空隙，而查看调试器，依旧是没有内外边距

实际上会有几种解决方案：
对于垂直的图像，可以添加

img{
  vertical-align: top;
}

对于水平的图像，可以将原来的html代码改成

  ![](../image/task3-groupmember.jpg)![](../image/task3-groupmember.jpg)![](../image/task3-groupmember.jpg)![](../image/task3-groupmember.jpg)

其实就是不分行写，如果觉得这个影响了你完美的代码美观的话，也可以这样

  ![](../image/task3-groupmember.jpg)<!--
  -->![](../image/task3-groupmember.jpg)<!--
  -->![](../image/task3-groupmember.jpg)<!--
  -->![](../image/task3-groupmember.jpg)<!--

就是将代码间的空隙注释掉