inline/inline-block/block 的区别

display的属性值有：

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

一、block

block是块级元素，总是在新行上开始；高度、行高、顶和底边距都可以控制； 如果不设置宽度的话，宽度默认值是它容器的100%。

<div><p><h1><form><ul><li>都是块级元素。

<p class="dis_block">block元素block元素</p>
<p class="dis_block">block元素block元素</p>

CSS：

.dis_block{
    background:#eee;
    border:2px solid #ccc;
    padding:5px; 
    margin:6px;
    height:30px;
    line-height:30px;
}

二、inline　　

inline元素和其他元素都在一行上；高、行高、顶和底边距不可改变；宽度是它内容的宽度，不可改变，设置宽度无效。

特点就是：

设置宽度、高度无效，

设置行高会增加顶部和底部的间距但内容区高度不变，

设置padding有效

设置margin-left、margin-right有效

设置margin-top、margin-bottom无效

<span class="dis_inline">inline元素inline元素</span>	
<span class="dis_inline">inline元素inline元素</span>	

CSS：　

.dis_inline{background:#fea;border:2px solid #ccc;padding:3px; margin:10px;height:30px;line-height:30px;300px;}

三、inline-block

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

旁边的内联对象会被呈现在同一行，允许空格。

特点是：

可以设置宽度高度行高

可以设置padding

可以设置marign

<p class="dis_inlineblock">inline-block元素inline-bloc元素</p>	
<p class="dis_inlineblock">inline-block元素inline-bloc元素</p>	

CSS：

.dis_inlineblock{display:inline-block;*display:inline;*zoom:1;background:#2fa;border:2px solid #ccc;padding:3px;margin:10px;height:30px;line-height:30px;300px;}

IE6、7不支持inline-block，如果要兼容IE6、7 ，代码如下

display:inline-block;*display:inline;*zoom:1;

效果图：