HTML5中img标签图片有间隙怎么办，如何解决？-群英

上一篇：CSS使图片变灰的方法是什么，代码怎样写？下一篇：用CSS3怎样做动态渐变背景，方法是什么？

HTML5中img标签图片有间隙怎么办？在网页开发中我们会经常使用img标签，当我们在添加多张图片的时候，有一些朋友有遇到图片存在间隙的问题，那么我们如何解决这个间隙，img标签的间距是如何调整的？

img标签基础解析在HTML5中img标签图片四要素：

    （1）src：图片路径
    （2）width：
    （3）height：
    （4）alt：

alert的作用:

当图片发生错误时候，用alt里面的函数表示错误内容便于搜索引擎抓取(方便于搜索引擎抓取,方便SEO渲染)

注意事项：

（1）img设置的width和height必须是图片的原始尺寸
（2）一般inline元素是不能设置宽高，虽然img也是inline元素，但是它是一个替换元素可以通过src，因此可以自主设置宽高

inline元素和内联元素的差别。

如何解决inline行内元素之间的间距问题：

下图中内联元素产生上下间隙的原因：

img是个inline元素=>inline元素会默认产生元素代码中的换行符（也称为空白符=>也可以默认作为一个文本串）

下图中内联元素垂直方向上产生间隙的原因：

    内联元素的默认基线对齐方式导致空节点出现（vertical-align:baseline;）
    什么是基线对齐方式？
    作用于垂直，水平方式
    什么是空白节点？
    作用于垂直方向上
    空白节点产生的病因：因为img内联元素在游览器中可能会被当做字符串看待，可能受到front-size字体大小影响，line-height同时会影响空白节点=>添加图片时候下面会多出来一条空白线就是空白节点的作用