为display:inline-block有很多方便，可以水平垂直居中，又可以设高宽，但有个问题，当使用inline-block的时候发现当给各个元素相应的百分比的时候，他们的总和是大于100%的，从而出现了换行的情况，一开始没怎么在意这个问题，今天进行了一下研究，才发现原来display:inline-block给的元素中间会有一个空白的间隙，如图：
对应的代码是：
其实这个空白间隙虽然在代码中没有体现，但其实是我们忽略的空格，因为当我们把元素设置inline-block的时候，它已经具有了行内的性质，也就是说元素跟元素之间是可以打入空格的，而由于我们写代码的习惯，上述我们定义的两个元素之间通常会有换行，而不论多少空格都会变成一个空格，所以才会出现空隙现象。
当我们把代码改成如下：
就没有了空隙：
出现这种问题的根本原因就在此，那么怎么解决呢，其实行内元素默认有间距是因为有font-size这个属性，我们把font-size设为0就可以解决这个问题。
需要给相应的父元素加上font-size:0即可，注意的是要在子元素身上再重新设置font-size，不然会看不到里面的文字。
切图网（qietu.com）专业从事web前端开发的，专注we前端开发，响应式布局，webapp手机端网页制作，微信html5页面制作，bootstrap布局等，关注用户体验。
