块元素和内联元素的主要区别：

1.块元素会自动在末尾加一个换行，而内联元素不会，多个内联元素会自动排成一行，比如img标签或span标签插到一行文字中，他会和这行文字自动排成一行，而如果你在这行文字中插入一个块元素标签，比如div标签，那么这个div标签会自己独占一行。查看demo：http://www.css88.com/demo/inline-block/inline-and-block.html
2.块元素可以定义自身的高度（width）和宽度(height),而内联元素不可以。
3.块对象定义的自身垂直边距可以改变行高，而内联元素虽然可以定义但改变不了行高。

更多关于块元素和内联元素可以看看这里http://www.css88.com/archives/646；

display:inline-block是什么呢？

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。这就是display:inline-block的作用，再讲的通俗一点就是，Display值为inline-block的元素内部形成一个块状盒模型，而本身形成类似一个内联的被替代元素”。即display为inline-block的元素既可以像块状元素一样定义高度宽度，又可以和内联元素（比如文字）排列在一行。
 

( ⊙o⊙ )哇，好强大的属性啊！我以前怎么没发现啊？是的很强大，但是以前的FF2，IE6，IE7不支持改属性（目前支持的浏览器：FF3，Opera，Safari，Chrome，ie8），FF2可以使用FF的私有属性display:-moz-inline-box;而且FF2绝大多数已经升级到FF3了，所以不成什么大的问题了，IE6和IE7拥有这个display:inline-block就会触发layout，就相当于zoom:1（关于ie的layout看以查看：http://www.css88.com/archives/tag/haslayout），我们可以用该特性在IE6和IE7下模拟display:inline-block；也可以直接让块元素设置为内联对象呈递然后触发块元素的layout，即display:inline; zoom:1;

display:inline-block的几个应用

1.先看效果图：

2.html代码：

3.CSS代码：

查看demo：http://www.css88.com/demo/inline-block/inline-block.html

原文：http://www.css88.com/archives/1465