先来一张图：
测试代码：
<!DOCTYPE html> <html> <head> <style> #bb { overflow: hidden; background-color: gray; } #bb .f1 { font-size: 180px; background-color: yellow; } #bb .f2 { font-size: 340px; background-color: yellow; } #bb > div { display: table-cell; } #bb span { } </style> </head> <body> <div id="bb"> <div> <span class="f1">fff</span> </div> <div> <span class="f2">fffff</span> </div> </div> </body> </html>
效果如下：
div和span上下是有空隙的这个空隙就是行间距。
改变代码以后，使用display:inline-block之后呢？
#bb span {
display: inline-block;
}
span和div中间没有空隙了，但是行间距依然存在，不过这回行间距在span元素里面了，span的高度变成了388px，和外层div高度一样。
display:inline和display:inline-block的区别
原文：http://www.cnblogs.com/chen8840/p/4878148.html