一.行內元素和塊級元素有哪些？
塊級元素
| |
<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
行內元素
| |
<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
二.行內元素與塊級元素有什麼不同？
1.尺寸-塊級元素和行內元素之間的一個重要的不同點
行內元素和width
W3C CSS2 標准規定行內元素、非置換元素不會應用width屬性。
以下例子中，對行內元素<a>應用了width:200px,你可以看到，根本就沒有什麼效果。
行內元素和height
W3C CSS2 標准規定行內元素、非置換元素不會應用height屬性，但是盒子高度可以通過line-height來指定。
以下例子，對行內元素<a>應用了height:50px,你可以看到什麼效果都沒。
行內元素和padding
你可以給行內元素設置padding，但只有padding-left和padding-right生效。
以下例子，行內元素<a>應用了padding:50px。你可以看到對左右的內容有影響，但是對上下沒影響。
行內元素和marging
margin屬性也是和padding屬性一樣，對行內元素左右有效，上下無效。
下面的例子,對<a>應用了margin:50px，你可以看到左右邊緣是生效了但是內容上下卻沒有。
記住對行內元素
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的，看圖上效果就知道了
上文部分翻譯自：http://www.maxdesign.com.au/presentation/inline/
2.text-align屬性是兩者表現的又以不同之處
在W3CCSS2.1規范第16.2節 對text-align 有詳細地描述：
------------------------------------------
值： left | right | center | justify | inherit
初始值：匿名值，由'direction'的值而定，如果'direction'為'ltr'則為'left'，如果'direction'為'rtl'則為'right'。
應用於: 塊級元素，表格單元格，行內塊元素
繼承性: 是
計算後的值：初始值或指定值
------------------------------------------
這個特性描述了如何使一個塊元素的行內內容對齊。
注意一點，標准裡說這個屬性是用來對齊行內內容的，所以，不應該對塊級內容起作用。
解釋一下，行內內容是說由行內元素組成的內容，行內元素大家都知道吧，比如 SPAN 元素，IFRAME元素和元素樣式的 ‘display : inline’ 的都是行內元素；塊級內容跟則是由塊級元素構成，DIV 是最常用的塊級元素。塊級元素和行內元素的區別是，塊級元素會占一行顯示，而行內元素可以在一行並排顯示。
這樣，我們對這個特性的認識應該就清楚了。但是，問題來了，雖然標准裡這麼規定，那麼是不是所有浏覽器都遵守呢？答案是否定的。猜猜是哪個浏覽器這麼特立獨行啊？ IE！！
IE6/7及IE8混雜模式中，text- align:center可以使塊級元素也居中對齊。其他浏覽器中，text-align:center僅作用於行內內容上。
解決這個問題比較好的方式，就是為所有需要相對父容器居中對齊的塊級元素設置“margin-left:auto; margin-right:auto”。但這個方式 IE6/IE7/IE8的混雜模式中不支持，所以還要設置父容器的 "text-align:center;"。
若居中對齊的子元素內的行內內容不需要居中對齊，則還需要為其設置“text-align:left”：