首先先对行内元素（inline elements，比如span,a,b等。）和块元素(block elements，比如div,h1,p等)进行一下知识回顾.简而言之，它们的区别可以分为下几点
- 块元素会自动在末尾加一个换行，而行内元素不会。
- 块元素可以定义自身的高度（width）和宽度(height),而行内元素不可以。
- 块对象定义的自身垂直边距可以改变行高，而行内元素虽然可以定义但改变不了行高。
在前端开发中，我们遵循结构，表现，行为相分离。所以将修饰型图片利用css的background把它写在表现层中。那最常见的就是icon的应用。如：
去我的flickr相册。这是利用行内元素的左侧内间距（padding-left）实现的icon+文字的组合。
但有时候，我们还需要另外一种表现形式，只是单独的icon而不需要文字或者链接，并且是图文混排。也许你想只要把span里面的文字删除不就可以了么，实际上并非如你所愿。
。如果你现在在ie下，肯定什么也看不到。
原因是行内元素在内容为空的情况下,ie认为它的width为0。
,现在在ie下可以看到了。
根据行内元素的特性，并不能为其设置一个宽度来解决，所以只能在里面加一个毫无意义的空格用来占位，来生成一个高度值，但在无css的条件下（在spider的眼里），无法得知它为何物。如下:
<a class="icon-flickr"> </a>
所以这样的解决方案让人无法接受。
使用inline-block就可以解决这个问题 阅读全文»
