display:inline、block、inline-bloc

1.display:block将元素显示为块级元素

• 总是在新行上开始
• 高度，行高以及顶和底边距都可控制
• 宽度缺省是它的容器的100%，除非设定一个宽度
• <div> <p> <h1> <form> <ul>和<li>是块元素的例子

2.display:inline将元素显示为行内元素

• 和其他元素都在一行上
• 高，行高及顶和底边距不可改变
• 宽度就是它的文字或图片的宽度，不可改变
• <span> <a> <label> <input> <img> <strong> 和<em>是inline元素的例子

3.inline-block将块对象作为内联对象呈递

• 让块元素和其他元素保持在一行上
• 高度，行高以及顶和底边距都可控制

4.inline和block的转换情景

• 让一个inline元素从新行开始
• 让块元素和其他元素保持在一行上
• 控制inline元素的宽度（对导航条特别有用）
• 控制inline元素的高度
• 无须设定宽度即可为一个块元素设定与文字同宽的背景色

参考资料：display:inline、block、inline-block的区别