内联元素可以理解为不能直接设置宽度和高度元素，比如span，你为他设置宽度和高度没有效果，除非你把它设置成块级元素。
如下面的代码把display:block;属性值去掉的话，宽度和高度都不会起作用了。
|
1
|
<span style="width:100px;height:100px;display:block;"></span> |
margin可以控制内联和块级元素的间距，而不光是内联元素。
主要注意他们之间的转换问题，如块级元素加float属性会变为内联元素。
--------------------------------------------------------------------------------------------------------------------
display使用的最多属性值为：block（块级元素），inline（内联元素），inline-block(内联块元素)
通俗易懂的说：
块级元素（block）：可以设置宽高，margin，padding值等；
|
1
2
|
<div>我是块级元素DIV！</div><p>我是块级元素P！</p> |
上面的显示的结果：
|
1
2
|
我是块级元素DIV！我是块级元素P！ |
内联元素（inline）：不可以设置宽高，margin，padding值等；
|
1
2
|
<span>我是内联元素SPAN！</span><em>我是内联元素EM！</em> |
上面显示的结果（会在一排显示，这时你设置的宽高，margin，padding值都不起作用）：
|
1
|
我是内联元素SPAN！我是内联元素EM！ |
内联块元素(inline-block)：可以设置宽高，margin，padding值
|
1
2
|
<span>我是内联元素SPAN！</span><em>我是内联元素EM！</em> |
css：
|
1
|
span,em { padding: 0 5px; display: inline-block;} |
上面显示的效果会在一排，但是同时宽高，margin，padding值也起作用；
|
1
|
我是内联元素SPAN！ 我是内联元素EM！ |
原文：http://www.cnblogs.com/allensun-193/p/5496611.html