display:inline-block;顾名思义是结合了inline和block的特性。就是将对象呈现为inline对象（不换行），但是对象内容作为block对象呈现（可以设置宽高）。总结来说就是，在可以设置宽高的同时，使元素保持在一行中。
例如我们在做导航栏时，以前的设置方法要通过 float:left 来控制<li>来实现，还要解决浮动带来的种种影响。而现在可以直接用 display:inline-block; 来解决，具体代码如下：
HTML:
<ul> <li class="active"><a href="#">新闻</a></li> <li><a href="#">体育</a></li> <li><a href="#">汽车</a></li> <li><a href="#">房产</a></li> <li><a href="#">旅游</a></li> <li><a href="#">教育</a></li> </ul>
CSS:
ul, li, a{ list-style-type: none; margin: 0; padding: 0; } a{ text-decoration:none; color:#333 } li{ diaplay:inline-block; font-size:16px; width:80px; text-align:center; }
可以实现导航栏居中。
当然也可以直接用来进行三列布局操作，而且不需要注意float布局带来的困扰。
diaplay:inline-block; 唯一需要注意的就是出现空隙，这些所谓的空隙就是空白符，这也是inline的默认现象。
解决方法：在其父元素的css中，即上述代码的ul{}中，添加 font-size:0px; 即可解决。
原文：https://www.cnblogs.com/zpp1/p/13157055.html