行内元素存在间距问题

行内元素之间存在间距的问题

行内元素不换行

刚在做项目的时候，发现发现，display:inline-block；的元素（即行内元素）之间存在一些间距。我查看之后发现没有margin,padding这种东西。即使我使用通配符也不能消除内外边距，究其原因是行内元素的回车换行符引起的。看看以下实例：

<input />
<button>提交</button>
<input type="text"><input type="submit">

可以看出相邻行内元素间当换行写时有间隔，不换行写时没有间隔。元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。

故解决方法之一是行内元素在编辑器中不换行。但考虑到代码可读性，显然连成一行的写法是不可取的。

使用margin负值

我们还可以使用margin负值，但是margin负值的大小与上下文的字体和文字大小相关。

例如，对于12像素大小的上下文，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。

由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。

不写闭合标签

<div class="space">
       <a href="##">惆怅</a>
       <a href="##">淡定</a>
       <a href="##">热血</a>
   </div>
   <br>
   <div class="space">
       <a href="##">惆怅
       <a href="##">淡定
       <a href="##">热血</a>
   </div>
   /*为了兼容IE6/IE7的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。*/

设置font-size为0；

添加样式

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。但是随之而来的问题就是这个盒子里不能有文字了，其子元素可以设置字体需多嵌套一层。

使用letter-spacing

.space {
    letter-spacing: -5px;
}
.space a {
    letter-spacing: 0;
}

该方法可以搞定基本上所有浏览器。

使用word-spacing

.space {
    word-spacing: -5px;
}
.space a {
    word-spacing: 0;
}

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。

使用浮动

总结：

行内元素之间存在间距的问题解决方法：

1. 行内元素不换行，但这样页面不够美观。
2. 使用margin负值，这个得结合字体大小调整，不是特别建议使用。
3. 不写闭合标签。
4. 使用font-size:0px;这样也可以使间距消失，但是随之而来的问题就是这个盒子里不能有文字了，其子元素可以设置字体需多嵌套一层。
5. 使用letter-spacing或word-spaing。
6. 最后一个flot，flot:left。不建议使用，使用时注意清除浮动。

注：

最近还在用canvas绘图，想要实现设置画布宽高为屏幕宽高，但是页面出现了滚动条，而这也是行内元素的杰作。

 var w = window.innerWidth,
     h = window.innerHeight;
var canvas = document.getElementById('canvas');
   canvas.width = w;
   canvas.height = h;

解决方法：

既然是行内元素引起的，那我就将元素设置为块级元素。同时去除默认边距。

*{
          margin: 0;
          padding: 0;
      }
      #canvas{
          background-color: red;
          display: block;
      }