display: block ，display：inline 和display：inline-block 区别

1. display: block 将元素设置为块级元素。
2. display：inline 将元素设置为行内元素。

区别就是第2点中讲到的，一个是是否独占一行，一个是是否可设置宽高问题（img，input除外）。

display：inline-block 将元素设置成行内块级元素，兼容了两者的优点。
使得元素在同一行显示（不独占一行）的同时，又可以对它的宽高进行设置。

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。
同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。
与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

inline元素的margin和padding属性， 水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果； 但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。