区块元素、内联元素与内联块元素的区别，内联元素之间会有空格的原因及解决方案

区块元素与内联元素

区块元素display:block

div p ol ul  li  dl  dd  dt  form table  thead 
 tbody  tfoot  hr  h1~h6  caption  th  tr   address

内联元素display:inline

a  span  i  b  strong  q  em  br  var  code  sub  sup
img   button   input   select  label  textarea  object

区块元素

独占一行，
支持所有样式，不设置宽度默认为父元素宽度，不设置高度，由内容撑开
不会解析换行符

内联元素

支持所有样式
在一行有空间时，可以其他非区块元素在同一行显示
不支持宽高样式，宽高由内容撑开
内联元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
会解析换行符

内联块元素

支持所有样式
在一行有空间时，可以其他非区块元素在同一行显示
支持宽高样式，宽高由内容撑开
会解析换行符

内联元素之间会有空格的原因，如何解决

内联元素会解析换行符,将换行符、制表符（tab）、空格等字符解析出产生空格
解决方法：
（1）连续标签
（2）添加注释
（3）拆分标签
（4）设置margin-right为负值，需要考虑上下文的字体和文字大小，不建议这样做
（5） letter-spacing：-5px；
（6）IE6 7下始终存在1px的空隙，需要使用word-spacing减少单词间的空白（即字间隔） word-spacing:-1px;
（7）父元素字体设置为0（空格字体为宋体） ：font-size：0px；
（8）设置浮动：float：left；

word-space和letter-space的区别：

word-spacing 属性增加或减少单词间的空白（即字间隔）

<p style="word-spacing:10px;"> this is a  test</p>
//显示： this   is    a     test*/
<p style="word-spacing:10px;">这  是   一   个  测  试 </p>
//显示: 这     是      一      个     测    试

letter-spacing 属性增加或减少字符间的空白（字符间距）

<p style="letter-spacing:10px;"> thisisatest </p>
//显示： t  h  i  s  a  t  e s t
<p style="letter-spacing:10px;"> 这是一个测试</p>
//显示：这   是   一   个   测   试