内联元素空隙问题

Posted 古兰精

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了内联元素空隙问题相关的知识,希望对你有一定的参考价值。

一、内联元素空隙问题

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

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

  从节点(node)的角度说,这个问题产生的真正原因是:当我们换行时,会产生一个文本节点,这个文本节点的内容是换行

技术分享图片

  常见的节点以及节点类型值

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

二、总结一下解决方案:

  1、既然是由于行符、制表符(tab)、空格等字符引起,那么一种方法就是去掉内联元素之间的换行符、制表符(tab)、空格

  比如:(1)用HTML注释代替换行

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

  (2)元素开始标签紧跟结尾标签

<li> 
    one</li><li>
    two</li><li> 
    three</li> 

<li>one</li  
    ><li>two</li  
    ><li>three</li>

  缺点:这样代码很难看

  2、在父元素中设置font-size: 0,然后在子元素上重置正确的font-size

  缺点:inline-block元素必须设定字体,不然行内元素中的字体不不显示。

  3、为inline-block元素添加样式float:left,加了浮动的内联元素是不会有这个空隙的。

  4、使用margin-right负值

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

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

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

  5、使用display:table和word-spacing(最优的方法)

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

  6、设置字间距或者字符间距

  在父容器的样式中改变“word-spacing”或者“letter-spacing”为负值,一般为-5也就好的。这种办法也会消除空隙,但是还是会产生文本节点。这里要注意的是改变间距会影响后面所有的字体,所有在后面要修改回来。

 

以上是关于内联元素空隙问题的主要内容,如果未能解决你的问题,请参考以下文章

inline-block清除空隙2

inline内联函数

<code> vs <pre> vs <samp> 用于内联和块代码片段

行内元素之间的有个小空隙的问题

2C++ 的升级

消除input与父元素指明出现的空隙