消除内联元素的空隙

消除内联元素的空隙

1.产生的原因

当我们使用"display:inline-block"把块集元素转换为内联元素时，每两个内联元素之间有一定的空隙。

这个空隙是由于我们换行产生的。当我学到了节点（node）时，就发现了这个问题产生的正真原因。

这些是常见的节点以及节点类型值

元素节点            　　Node.ELEMENT_NODE(1)
属性节点            　　Node.ATTRIBUTE_NODE(2)
文本节点            　　Node.TEXT_NODE(3)

原因：当我们换行时，会产生一个文本节点，这个文本节点的内容是换行

2.解决办法

第一种，不换行

既然是换行产生的，那么我们不换行就是了。所以第一种办法就是把所有的代码都写到一行，便不会产生空隙了。

但是这样子问题又来了，如果代码太多，写到一行会影响程序可读性，不好看嘛。所以第一办法也不是很可行。

第二种，改变字体大小

这个换行是字符吧，那么我们把字体大小改为0，他便不会产生了。

这种解决办法虽然也能解决，但是有时候会影响后面的字体，如果你后面忘记把字体变回来的话，那就尴尬了。

第二种办法还是会产生文本节点。

第三种 添加注释

在上一个标签尾部和下一个标签头部添加注释。

这种办法不会产生空隙，但会产生一个注释节点。

第四种 设置“margin-left”’

在CSS中设置margin-left为赋值，一般为-5就可以了。

这个办法是使用距左为负值把空隙覆盖掉，但会产生一个文本节点。

第五种 设置字间距或者字符间距

在父容器的样式中改变“word-spacing”或者“letter-spacing”为负值，一般为-5也就好的。

这种办法也会消除空隙，但是还是会产生文本节点。这里要注意的是改变间距会影响后面所有的字体，所有在后面要修改回来。

第六种 使用浮点形式

既然使用"display:inline-block"会产生空隙，那么我们不使用他，使用“float:left”就不会产生空隙了。

这种办法也会产生空隙，但是空隙会被掩盖掉。使用这种办法后，下一个元素一定要清除浮点带来的影响。

3.总结

只有第一种和第三种不会产生文本节点，但是这两种办法也忒烦了。第一种要把所有的代码写一行，会产生可读性问题。第二种就是需要你多写了，也会产生可读性问题。

剩余的第二种、第四种、第五种都是改变样式。这个只有第四种办法是不会影响后续代码的。第六种就是不使用"display:inline-block"，转而使用“float:left”，但是会影响后续代码。所以第四种办法是最好的，不会影响后续代码。不过第二种使用的最多，一般我们需要在后续代码中调整字体的，所以这种使用比较多。