当我们用firbug浏览别人的网站时，我们会发现设计师会在很多地方使用inlinee-block。众所周知，inline是声明div是内联对象，block是声明块对象，那么inline-block是什么意思呢？接下来，让我们做一个测试，让我们了解三者的区别和作用:
< html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >inline、block、inline-block的区别</ title > < style > .a{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;} .b{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;} .c{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;} </ style > </ head > < body > < span class = "a" > inline </ span >inline < span class = "b" > block </ span >block < span class = "c" > inline-block </ span >inline-block </ body > </ html > |
我们发现，内联对象inline为其设置height和width是没有用的，因为内部元素的宽度和高度 padding。通过观察inline对象的前后元素，我们会发现inline并非单独占据一行，其它元素也会紧跟其后。
块对象block可以设置宽度和高度，但其实际宽度和高度是宽度和高度 padding。观察block的前后元素，我们会发现block应该单独占据一行。
当我们看到这里的时候，我们会想，如果我们需要div的宽度和高度，并且不希望它独占一行呢？
此时，我们需要使用inline-block，然后观察上图，我们会发现inline-block具有block的宽高特性和inline的同行元素特性。
最后，IE6/7下padding对inline的宽度没有影响。看下图：
