display:inline-block下，元素不能在同一水平线及元素间无margin间距的问题解决方法

在前端页面编辑中，常常用于块元素横排列时，我们会用到浮动或者dispaly：inline-block；

浮动虽然好用，效果明显，但是会存在潜在BUG，（暂且不论）；那么display：inline-block也能使其横排，但是有两个很明显的问题：

1.横排元素之前没有设置，margin却多出了间距；

2.横排元素不能在同一水平线上；

看图：

处理方式：只需要在横排元素的父级设置font-size:0;即可

 

原因：

代码编译时，标签间有折行或空格，都相当于字符空格，这种字符，默认有font-size；所以除了设置font-size=0；还可以不进行折行或空格，但是这样不利于代码的阅读；

原图：

分析图：在父级元素首标签后按一个”delete“后面就会显示出空格字符

OK，接下来我们继续处理横排不在同一水平线的问题（顺带提一下，float无此BUG，都会以下边对齐）；

原图：

处理：这是因为横排元素在父级元素盒子中，没有垂直方向的对齐方式；所以对横排元素垂直方向给与对齐设置即可；

 

详细的水平线问题，可以转移到这位老铁这里：

http://www.zhangxinxu.com/wordpress/2010/11/拜拜了浮动布局-基于displayinline-block的列表布局/

以及案例：

https://segmentfault.com/q/1010000007142118?_ea=1251429