写页面样式时候，经常会希望行内(inline)元素可以设置高度、宽度等属性；希望块级(block)元素可以显示在同一行；在这种情况下会想到使用inline-block。与这个属性相关的，自然就是display:inline和display:block了，下面先梳理一遍这两个属性。
一.行内元素和块级元素有哪些？
块级元素(block)
| Element | Description |
|---|---|
<address> |
information on author |
<blockquote> |
long quotation |
<button> |
push button |
<caption> |
table caption |
<dd> |
definition description |
<del> |
deleted text |
<div> |
generic language/style container |
<dl> |
definition list |
<dt> |
definition term |
<fieldset> |
form control group |
<form> |
interactive form |
<h1> |
heading |
<h2> |
heading |
<h3> |
heading |
<h4> |
heading |
<h5> |
heading |
<h6> |
heading |
<hr> |
horizontal rule |
<iframe> |
inline subwindow |
<ins> |
inserted text |
<legend> |
fieldset legend |
<li> |
list item |
<map> |
client-side image map |
<noframes> |
alternate content container for non frame-based rendering |
<noscript> |
alternate content container for non script-based rendering |
<object> |
generic embedded object |
<ol> |
ordered list |
<p> |
paragraph |
<pre> |
preformatted text |
<table> |
table |
<tbody> |
table body |
<td> |
table data cell |
<tfoot> |
table footer |
<th> |
table header cell |
<thead> |
table header |
<tr> |
table row |
<ul> |
unordered list |
行内元素(inline)
| Element | Description |
|---|---|
<a> |
anchor |
<abbr> |
abbreviated form |
<acronym> |
acronym |
<b> |
bold text style |
<bdo> |
I18N BiDi over-ride |
<big> |
large text style |
<br> |
forced line break |
<button> |
push button |
<cite> |
citation |
<code> |
computer code fragment |
<del> |
deleted text |
<dfn> |
instance definition |
<em> |
emphasis |
<i> |
italic text style |
<iframe> |
inline subwindow |
<img> |
Embedded image |
<input> |
form control |
<ins> |
inserted text |
<kbd> |
text to be entered by the user |
<label> |
form field label text |
<map> |
client-side image map |
<object> |
generic embedded object |
<q> |
short inline quotation |
<samp> |
sample program output, scripts, etc. |
<select> |
option selector |
<small> |
small text style |
<span> |
generic language/style container |
<strong> |
strong emphasis |
<sub> |
subscript |
<sup> |
superscript |
<textarea> |
multi-line text field |
<tt> |
teletype or monospaced text style |
<var> |
instance of a variable or program argument |
注：textarea在ie下有个bug：textarea元素会继承它父元素的padding和margin（原因未知，待查中）。解决方法：在textarea外再包一层
二、行内元素和块级元素的区别
1、显而易见的是遇到block元素，会另起一行显示，inline元素会在一行显示；
2、对行内元素设置width和height是无效的；如果要设置它的高度，可以通过设置line-height；
3、对行内元素设置margin，只有margin-left、margin-right有效果；
4、对行内元素设置padding，只有padding-left、padding-right有效果，它可以使元素的范围扩大，但是对周围的元素不会照成影响。
三、inline-block的支持：ie6/7不支持，Firefox3以下版本不支持
在IE中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发 layout（如果你对 layout 感觉到陌生，可以参看 old9 翻译的http://www.cnblogs.com/liuguanghuiyes/articles/1848380.html），从而使内联元素拥有了display:inline-block 属性的表症。从上面的这个分析，也不难理解为什么 IE 下，对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如 Opera 中块元素呈递为内联对象。
延伸一个问题：IE下块元素如何实现 display:inline-block 的效果？
有两种方法：
1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下（…为省略的其他属性内容）：
div {display:inline-block;...}
div {display:inline;}2、直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。代码如下：
div {display:inline; zoom:1;...}
详细可以查看：http://www.planabc.net/2007/03/11/display_inline-block/