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 属性的值。

1、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;
}

2、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;width:300px;}

3、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;width:300px;}

IE六、7不支持inline-block，若是要兼容IE六、7 ，代码以下

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

效果图：