img （内联元素）（inline元素）标签上下左右间隙问题原因及解决方案：垂直方向间隙和水平方向间隙原因及解决方案：

本文链接：https://blog.youkuaiyun.com/dfydn/article/details/55188175

img （内联元素）（inline元素）标签上下左右间隙问题原因及解决方案：

垂直方向间隙和水平方向间隙原因及解决方案：

1. 我们先来看左右间隙的原因和解决方案，最后讲解上下间隙的原因及解决方案。

产生左右间隙的原因：大家看图

根据W3C规定，JavaScript种的DOM元素的类型有12种，在这里img是节点元素，而他们之间的换行符则是一个文本元素，文本元素根据字体大小来占位，字体越大占位越多，本机测试，img之间的换行符在谷歌下面默认占位8px，IE下面默认占位4px；

产生的原因：1.img标签之间的换行符；

解决方案：

用浮动float:left; （可能会影响其他元素，不建议使用，慎用）
设置父元素display值为inline-table 、table 、table-footer-group 、 table-header-group、 table-row 、table-row-group（不建议使用，IE下面完全无效）
去掉文本元素，也就是去掉换行符，这样代码分层不明确显得太乱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 200px;

        }
    </style>
</head>
<body>

    <div><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""><img src="bg1.jpg" alt=""></div>

</body>
</html>

            4.设置父级元素的font-size:0; 使中间的换行符大小为0即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 200px;

        }
    </style>
</head>
<body>
    <div style="font-size: 0;">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
        <img src="bg1.jpg" alt="">
    </div>
</body>
</html>

            你还可以给margin设置一个负值来达到取消间隙的目的，当然，解决方法有很多，采用什么样的方法就看大家喜好了。

2. 产生上下间隙的原因和解决方案：

原因

实际上，这其实是inline元素搞的鬼。

任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。—-《CSS权威指南》

什么意思？

意思就是，其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline（基线）去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙，也就是我们上文出现的问题了。
这里写图片描述

            图片来源http://www.jb51.net/html5/518714.html

那我们既然知道了这个问题出现的原因，那么解决起来也就简单多le。

解决方案：1.还是浮动float:left;
2.设置display：block也可以解决上下间隙问题；（会换行）
3.设置父元素font-size:0;或者设置父元素line-height:0;
4.设置元素的垂直对齐方式vertical-align值为bottom、 middle、 sub 、top都可以。
5.使用margin负值也能达到想要的效果。