解决img标签出现间隙的5种方案.

1.既然是 inline 元素才会发生这个问题,那么我们直接在img标签上写一个display:block;属性即可。

<style type="text/css">
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;
 
            display: block;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

 2.修改它的垂直对齐方式，用vertical-align：middle;属性

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

   <style type="text/css">
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;
 
            vertical-align: middle;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

 3.使用浮动float:left;来清除

<style type="text/css">
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;
 
            float: left;
        }
        ul li {
            overflow: hidden;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

4.设置父元素的font-size:;大小为0。

​
<style type="text/css">
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;
        }
        ul li {
            font-size: 0px;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

​

 5.把img标签都写在一行上