关于Inline-block 和img标签的缝隙问题

属性为inline-block的标签，在书写代码是，若它们之间存在换行或空格。那么它们在页面上显示出来的效果，就是中间隔了一点空隙。比如这样的代码：

<input type="text" />
<input type="button" />
//或
<input type="text" />  <input type="button" />
//又或设置了inline-block的
<a href="##">叽叽</a>
<a href="##">喳喳</a>
<a href="##">呱呱</a>

它们出现在页面是的表现，之间都会存在一定的空隙，而且也不是存在padding和margin。

如果不想要这种效果，有下面这些结局办法

• 在HTML中干掉这种问题
  • 把它们紧紧连在一起（为了代码可读性，并不可取）
    <input type="text" /><input type="button" />
  • 腰斩标签内容

    <a href="###">
    叽叽</a><a href="###">
    喳喳</a><a href="###">
    呱呱</a>
    

  • 腰斩标签

    <a href="###">叽叽</a
    ><a href="###">喳喳</a
    ><a href="###">呱呱</a>
    

  • 用注释链接（这样标签之间的空隙就不会被解析）

    <a href="###">叽叽</a><!--
    --><a href="###">喳喳</a><!--
    --><a href="###">呱呱</a>
    

  • 干掉闭标签（显然不符合标准）

    <a href="##">叽叽
    <a href="##">喳喳
    <a href="##">呱呱</a> // IE6/7下，最后这个不能丢。html5随意。
    

• 用CSS解决问题

  <div class="box">                             <div class="box">
        <a href="##">叽叽</a>                         <input type="text" />
        <a href="##">喳喳</a>                         <input type="button" />
        <a href="##">呱呱</a>                   </div>
  </div>                                       
  

  • 使用magin负值（负值由上下文font-size决定，所以不咋好使）
    .box a/input { display: inline-block; margin-right: -3px;}
  • 使用font-size：0（就是把文字干掉）
    .box {font-size: 0;} a/input {font-size: 12px;}
//另外Chrome浏览器字体强制调节不得小于12，遂加上-webkit-text-size-adjust:none;
  • 使用letter-spacing（字母间距）（IE6/7搞不定）
    .box {letter-spacing: -3px;} a/input {letter-spacing: 0;}//重置
  • 使用word-spacing（单词间距，道理同上）
• 如果都不好使，看看大神的其他方法

那么下面来看看img之间的间隙怎么解决

其实以上的很多方法，都是可以实现图片之间空隙的去除的。
但是，我现在为止知道的方法中，去除图片空隙最彻底的，就是：

给img标签的父元素设置 font - size: 0;

只要字体大小为零0，图片360°的空隙都会消失得一干二净，并且不会影响其他布局，但是有个缺点就是font - size的属性会被继承，img兄弟元素需要做字体重置。

另外还有一些像float，position：absolute等使其脱离文档流的属性，也可以取消间隙。
但是因为它们影响了文档结构，所以使用起来并不方便。

若有新发现，日后补充。

Wait me back