inline-block是html5,详解CSS display:inline-block的应用

本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。

基础知识

display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了 inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和 height的特性，又保持了inline元素不换行的特性。

举例说明：以前我们做横向菜单列表的时候，我们可以通过li和float:left两者来实现，现在可以通过li和display:inline-block。

HTML代码：

• 首页
• 关于
• 热点
• 联系我们

CSS代码

ul, li { padding: 0; margin: 0; list-style-type: none; }

li { display: inline-block; border: 1px solid #000; }

效果图

详解CSS display:inline-block的应用

inline-block基本效果

可以看到li元素可以横向排列，并且可以设置width属性，大家可以复制代码自己查看效果或查看Demo

inline-block的问题

观察上面的例子，细心的同学肯定会发现，每个li之间有一个小空隙，而我们的代码中并没有设置margin等相关属性，这是为什么呢？

默认的inline元素

首先，我们观察一下默认的inline元素的表现：

HTML代码

首页

热点

CSS代码

a { margin: 0; padding: 0; border: 1px solid #000; }

效果图

详解CSS display:inline-block的应用

inline默认情况

默认情况下，inlin