display: inline-block

display:block 就是将元素显示为块级元素

block元素的特点是：

• 总是在新行上开始

• 高度，行高以及顶和底边距都可控制

• 宽度缺省是它的容器的100%，除非设定一个宽度

•  块元素的例子

  <div>, <p>, <h1>, <form>, <ul>, <li>
  

display:inline 就是将元素显示为行内元素

inline元素的特点是： 

•  和其他元素都在一行上；

• 高，行高及顶和底边距不可改变； 

•  宽度就是它的文字或图片的宽度，不可改变。

• inline元素的例子。

  <span>, <a>, <label>, <input>, <img>, <strong>, <em>
  

display:inline-block

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

应用此特性的元素呈现为内联对象，周围元素保持在同一行；但它拥有块元素的属性，可以设置高度和宽度。