前部分轉載自：詳解HTML行內置換元素與非置換元素的區分
一般情況下，行內元素只能包含數據和其他行內元素，除非你可以對css進行更改，那就可以另說了。
而塊級元素可以包含行內元素和其他塊級元素。這種結構上的包含繼承區別可以使塊級元素創建比行內元素更”大型“的結構。
以上只是個大概的說法，具體都某些特定的元素這條規律不一定適用~
通常我們的認識是這樣的：
一、行內元素
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea等
二、塊級元素
<address>聯繫方式信息。<article>HTML5文章內容。<aside>HTML5伴隨內容。<audio>HTML5音頻播放。<blockquote>塊引用。<Canvas>HTML5繪製圖形。<dd>定義列表中定義條目描述。<div>文檔分區。<dl>定義列表。<fieldset>表單元素分組。<figcaption>HTML5圖文信息組標題<figure>HTML5圖文信息組 (參照<figcaption>)。<footer>HTML5區段尾或頁尾。<form>表單。<h1>,<h2>,<h3>,<h4>,<h5>,<h6>標題級別 1-6.<header>HTML5區段頭或頁頭。<hgroup>HTML5標題組。<hr>水平分割線。<noscript>不支持腳本或禁用腳本時顯示的內容。<ol>有序列表。<output>HTML5表單輸出。<p>行。<pre>預格式化文本。<section>HTML5一個頁面區段。<table>表格。<tfoot>表腳註。<ul>無序列表。<video>HTML5視頻。- <iframe>內聯框架等
先進一個題外話
在面試一個 重構（各大公司的叫法可能不太一樣）時，我喜歡從一個點開始問，然後一直延展下去成爲一條線，甚至是一個面，直到問到不會的地方，然後又換另外一個點。
例如：我可能會說，能簡單聊聊
行內級元素和塊級元素的區別嗎。
一般這時，候選人都會說到 行內級元素 不會換新行，而 塊級元素 會格式化爲塊狀，即換行。但也有些遺憾的方面（如：http://blog.csdn.net/syleapn/article/details/79582190），當然這看起來似乎不是特別重要。
這時我會繼續問，
行內元素能夠定義寬度和高度嗎？
不少候選人會說：不能
我會繼續問，說幾個你熟悉的
行內元素吧
於是 span, strong, em, ins… 答案我還是比較滿意的。
我仍然會繼續，
img是行內元素麼？
候選人這時通常會遲疑一下，可能意識到我接下來想問啥了，但還是會回答：是
於是我會說，那
img能定義寬度和高度麼？
有的候選人這時會猶豫，因爲如果回答是，就會推翻他之前說的 行內元素不能定義寬高，如果回答不是，似乎又和他所熟知的經驗不一致。但通常最後還是會回答：能
那我就又得問，你之前不是說
行內元素不能定義寬高嗎？爲什麼img可以？
到這裏，候選人基本上不知道要怎麼回答好了，最後可能會告訴我，因爲 img 是特殊元素
當然，雖然這麼回答也不能說是錯誤的，但基本上也能知道候選人對這條線的基礎的掌握程度了。
但我希望聽到的答案是通過解釋置換元素相關的概念從而給出答案。
ok，到了這兒，大家也略知一二是什麼意思了吧，下面進入正題：
html元素分爲置換元素（又叫替換元素）與非置換元素（又叫非替換元素），置換與非置換元素有稍許的區別。注：置換元素與非置換元素不僅是行內元素中有，塊狀元素也有置換元素與非置換元素之分->比如：嵌入的文檔（iframe之類），還有audio和canvas在某些特定情形下也爲置換元素。。。。。。使用CSS的content屬性插入的對象是匿名替換元素。
那麼什麼是置換元素與非置換元素？
轉化官方的話來說意思爲：一個 內容 不受CSS視覺格式化模型控制（關於視覺格式化模型控制的問題，請戳這裏->視覺格式化模型中的各種框），CSS渲染模型並不考慮對此內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之爲置換元素。即置換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。
舉例說明：例如瀏覽器會根據img標籤的src屬性的值來讀取圖片信息並顯示出來，而如果查看(X)HTML代碼，則看不到圖片的實際內容；又例如根據input標籤的type屬性來決定是顯示輸入框，還是單選按鈕等。->這些元素往往沒有實際的內容，即是一個空元素。
非置換元素，W3C 中沒有給出明確的定義，
說明：(X)HTML 的大多數元素是不可替換元素，他們將內容直接告訴瀏覽器，將其顯示出來。比如<p>p的內容</p>、<label>label的內容</label>；瀏覽器將把這段內容直接顯示出來。
是不是還是有點繞，還是不太明白，我們看下面的闡述，通俗易懂：
來自徐濤的博客->Html中置換元素與非置換元素，地址鏈接http://blog.sina.com.cn/s/blog_4c81e6230101e29u.html
其中有類特殊的元素：如img|input|select|textarea|button|label等，他們被稱爲可置換元素（Replaced element）。他們區別一般inline元素（相對而言，稱non-replaced element）是：這些元素擁有內在尺寸(intrinsic dimensions),他們可以設置width/height屬性。他們的性質同設置了display:inline-block的元素一致。
或許有朋友對非置換元素（non-replaced element）有點疑惑，稍微幫助大家理解一下。非置換元素，W3C 中沒有給出明確的定義，但我們從字面可以理解到，非置換元素對應着置換元素（replaced element），也就是說我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，W3C中給出了定義：
“An elementthat is outside the scope of the CSS formatter, such as an image,embedded document, or applet”
從定義中我們可以理解到，置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類默認就有 CSS 格式化外表範圍的元素。進而可知，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素以外的元素。
補充：關於margin與padding->對於置換元素與非置換元素有不同影響？
關於這個問題，博主也正在研究中，這兒有篇文章很詳細->http://blog.csdn.net/gr11222/article/details/52071168，大家可以也先參考下:歡迎一起來討論這個問題~
但最後需明確的一點是：第一：html（行內元素+塊狀元素）分置換元素與非置換元素。
第二：padding、margin對置換元素與非置換元素的影響不同。
第三：對於塊狀非置換元素與行內非置換元素，padding與margin的影響不一樣。塊狀置換元素與行內置換元素的性質一樣。
So，最後問題上升到只需解決與清楚->行內置換元素與行內非置換元素的padding和margin使用！
附：w3c對padding與margin的說明
