Cacher is the code snippet organizer for pro developers

inline 和 inline-block

inline elements:

• 无法设置width、height和vertical margin
• 允许和其他元素显示在一行
• 例子如：em、strong
• 所有浏览器都支持

block elements:

• 上述属性均可以设置
• 在元素后边强加一个换行
• 所有浏览器都支持

inline-block elements:

• 允许和其他元素显示在一行（inline-block中的inline属性）
• 允许设置block elements的相应属性（inline-block中的block属性）
• IE8支持默认支持，不过可以通过hack来使老版本IE支持，比较经典的是使用display:inline-block;*display:inline;*zoom:1，详见参考资料
• 注意inline-block元素之间的间距问题 From W3CSchools:

An inline element has no line break before or after it, and it tolerates HTML elements next to it. A block element has some whitespace above and below it and does not tolerate any HTML elements next to it. An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

参考资料

• css-display-inline-vs-inline-block

• What is the difference between display: inline and display: inline-block?

• IE7 does not understand display: inline-block

• w3c specification

• inline-block元素去除间距