block元素的特點：
總是在新行上開始；
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設定一個寬度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。
inline元素的特點：
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子
我們來詳細瞭解它們的情況。
塊元素(block element)一般是其他元素的容器元素，塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤'P"。“form"這個塊元素比較特殊，它只能用來容納其他塊元素。
如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的默認佈局模式，把塊元素擺放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標籤也是塊元素的一種，table based layout和css based layout從一般使用者（不包括視力障礙者、盲人等）的角度來看這兩種佈局，除了頁面載入速度的差別外，沒有其他的差別。但是如果普通使用者不經意點了查看頁面源代碼按鈕後，兩者所表現出來的差異就非常大了。基於良好重構理念設計的css佈局頁面源碼，至少也能讓沒有web開發經驗的普通使用者把內容快速的讀懂。從這個角度來說，css
layout code應該有更好的美學體驗。
你能夠把塊容器元素div想象成一個個box，或者如果你玩過剪貼文載的話，那就更加容易理解了。我們先把需要的文章從各種報紙、雜誌總剪 下來。每塊剪下來的內容就是一個block。然後我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙上。這樣就形成了你自己獨特的文摘快報了。作爲一種技術的延伸，網頁佈局設計也遵循了同樣的模式。
內聯元素(inline element)一般都是基於語義級(semantic)的基本元素。內聯元素只能容納文本或者其他內聯元素，常見內聯元素 “a”。
需要說明的是：inline element的中文叫法，有多種內聯元素、內嵌元素、行內元素、直進式元素。基本上沒有統一的翻譯，愛怎麼叫怎麼叫吧。另外提到內聯元素，我們會想到有個display的屬性是display:inline;這個屬性能夠修復著名的IE雙倍浮動邊界問題。
塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後，塊元素和內聯元素的這種屬性差異就不成爲差異了。比如，我們完全可以把內聯元素cite加上display:block這樣的屬性，讓他也有每次都從新行開始的屬性。
A：行內就是在一行內的元素，只能放在行內；塊級元素，就是一個四方塊，可以放在頁面上任何地方。
B：說白了，行內元素就好像一個單詞；塊級元素就好像一個段落，如果不另加定義的話，它將獨立一行出現。
C：一般的 塊級元素諸如段落<p>、標 題<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內聯元素則如: 表單元素<input>、超級鏈接<a>、圖像<img>、<span> ……..
D：塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其後的無素也需另起一行進行顯示。
E：<span>在CSS定義中屬於一個行內元素，而<div>是塊級元素。
用容器這一詞會更容易形象理解它們的存在與用途，行內元素相當一個小容器，而<div>相當於一個大容器，大容器當然可以放一個小容器 了。<span>就是小容器。
塊元素(block element)一般是其他元素的容器元素，塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤’P”。“form”這個塊元素比較特殊，它只能用來容納其他塊元素。
它可以讓行內顯示爲塊的元素，變爲行內顯示，例如
DIV1
DIV2
這裏DIV1和DIV2分別佔一行，但是你給他們加上屬性後變了
DIV1 DIV2
DIV1和DIV2這時候顯示在同一行了
和 display:inline 對應的是 display:block，block 會讓應用了該 CSS 屬性的 HTML 標記變成塊級別元素，例如 SPAN 是行內顯示的，但是你加了 display:block 屬性就不一樣了
[font style= "display:block "] SPAN1 [/font]
block一般一個塊佔一行，除非float
inline是自動排爲一行，就象段內的文字一樣，可成爲多行。
display:inline比較經典的用法是用在 <ul> 下的 <li> 中
display:inline 對應不顯示爲 display:none
display:block 對應不顯示爲 hidden
說通俗點 樣式爲none的元素不佔位置,而樣式爲hidden的元素雖然不顯示但還是佔地方
inline-block的元素特點：
display:inline-block將對象呈遞爲內聯對象，但是對象的內容作爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。
將對象呈遞爲內聯對象，但是對象的內容作爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。(準確地說，應用此特性的元素呈現爲內聯對象，周圍元素保持在同一行，但可以設置寬度和高度地塊元素的屬性)
並不是所有瀏覽器都支持此屬性，目前支持的瀏覽器有：Opera、Safari在IE中對內聯元素使用display:inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了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;...}
|
|
按ie的說法，margin，padding，border這些是layout屬性。似乎不該用在inline元素上。
但css2.1規範裏有說明：
margin適用於
all elements except elements with table display types other than table-caption, table and inline-table
padding適用於
all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
不過，
margin-top/bottom對non-replaced inline元素無效（have no effect on non-replaced inline elements）。
margin-left/right對non-replaced inline元素會起作用，但當non-replaced inline是a元素時，ie下使用margin-left/right會有一個a:active虛框錯位的小問題。
http://bbs.blueidea.com/thread-2927667-1-1.html
所以我覺得對non-replaced inline元素使用margin不大好。
對replaced inline元素（img,textarea,button這些）的使用margin同block上效果也不大相同。
http://www.cssass.com/blog/index.php/2009/121.html
padding也差不多。
padding-top/bottom用在non-replaced inline元素上，我們也看不出效果。