内联元素inline-block空隙问题

Posted 2020-11-10 菲比月

1.产生的原因

当我们使用"display:inline-block"把块集元素转换为内联元素时，每两个内联元素之间有一定的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。

　　元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来html代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px

      当我学到了节点（node）时，就发现了这个问题产生的正真原因。

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

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

 

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

2.解决办法

第一种，不换行

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

<span>xxxx</span><b>xxxxx</b>

缺点：如果代码太多，写到一行会影响程序可读性，不好看嘛。所以第一办法也不是很可行。

第二种，改变字体大小(推荐）

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

设置其父容器的font-size为0，再设置内联元素的字体大小。

缺点：有时候会影响后面的字体，如果你后面忘记把字体变回来的话，那就尴尬了。

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

第三种 添加注释

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

<div>
    <span>内联元素</span><!-- 
     --><span>内联元素</span>
</div> 

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

第四种 设置“margin-right”

在CSS中设置margin-left为赋值，一般为-5就可以了。这个办法是使用距左为负值把空隙覆盖掉，但会产生一个文本节点。

缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px，而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。

注意：当marigin-right使用相对单位em来表示时，Chrome下可以正常去除间距，而Firefox下元素之间有重叠。

　　其中IE6/7下始终存在1px的空隙，需要使用word-spacing减少单词间的空白（即字间隔） word-spacing:-1px;

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

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

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

第六种 使用浮点形式(推荐）

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

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

第七种 使用display:table和word-spacing

.box{
    display:table;  /* 调教webkit*/
    word-spacing:-1em;/*其他浏览器*/
}