如何解决inline和linline-block在浏览器中的间距问题

写页面时，如果想要元素从左到右排列，但又不想使用浮动，那么很多人都会用到display:inline或者display:inline-block。

但是每次一用到这个两个属性，浏览器中浏览的时候就会有空隙，为了避免误差，最好还是把这些空隙去掉比较好，这里放上一个我在网上多番比较，认为比较好的 一种方式

<div class="parent">
　　<span class="child">美女如云</span>
　　<span class="child">高山流水</span>
</div>

  <style type="text/css">

*{
　　margin:0 auto;
}
.parent {
　　font-size: 0;
　　-webkit-text-size-adjust: none
}
.child {
　　display:inline-block; width:100px; height:100px; background:green;
　　font-size: 15px;
　　color: #000;
}

  </style>

父元素设置属性：font-size:0; text-size-adjust:none;

子元素随便设置就可以了，但记得设置字体大小，要不然可能看不到字

看下对比：

没有加这个属性的时候，

 

加了这个属性后

查看浏览器中的效果

示例下载