行内元素之间产生水平间隙的原因及解决方案

Posted 2020-10-06

1. 行内元素之间产生水平空隙的原因：代码中有意或无意的添加了换行符，tab（制表符）或者空格等字符引起的；

2. 解决方案：

• 删除引起问题的换行符，制表符或者空格等，但是缺点是会使代码结构混乱；
• 设置margin属性为负数，如：margin-left: -3px;缺点是负数的值不确定，得具体情况具体分析，不推荐；
• 在行内元素之间添加html注释注释符号；<!---->　

  1 <div>
  2     <span>行内元素</span><!--
  3     --><span>行内元素</span><!--
  4     --><span>行内元素</span><!--
  5     --><span>行内元素</span>
  6 </div>

  缺点是这样写会增加代码量，代码结构也会受影响；

  
  
• 设置font-size: 0; 用于消除换行符、tab（制表符）、空格等字符造成的影响，但需注意以下几点：

　　　　1. IE6，IE7浏览器当设置font-size：0时，换行符、tab（制表符）、空格始终存在1px的空隙；

　　　　2. 最新版本的Safari浏览器，Chrome浏览器不支持font-size: 0;；

　　　解决方法如下：

　　　　1. 针对IE6、7浏览器，使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔），即： word-spacing:-1px;

　　　　2. 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px, html{-webkit-text-size-adjust:none;}

　　　css代码如下：

html{
    -webkit-text-size-adjust: none;/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */
}
div {
    font-size: 0;/* 所有浏览器 */
    *word-spacing: -1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔） */
 }
span {
    font-size: 12px;
    letter-spacing: normal;/* 设置字母、字间距为0 */
    word-spacing: normal; /* 设置单词、字段间距为0 */
 }