區別

block 又稱塊級元素，inline也稱為行內元素

1. 塊級元素
   
   • 單獨佔一行 每個塊級元素都是新行的開始
   • 預設寬度為100%
   • 可以設定寬高 可以設定margin和padding屬性。
2. 行內元素
   
   • 可與其他的行內元素在同一行上 元素前後沒有換行符 不可以設定寬高 高度和寬度由內部內容填充後計算所得 顯示設定無效
   • 內部不可巢狀塊級元素
   • 不可以說設定寬高 img input textarea select也是行內元素可以說設定寬高二者是替換元素
   • 替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。替換元素一般有內在尺寸，所以具有width和height，可以設定。
   • 只可設定margin-left margin-right padding-left padding-right 也就是水平方向上的，垂直方向上的無效

塊級元素與行內元素可以通過制定display相互變化

常用的塊級元素和行內元素

常用的塊級元素
　　◎ blockquote - 塊引用
　　◎ dir - 目錄列表
　　◎ div - 常用塊級元素
　　◎ fieldset - form 相當於GroupPanel
　　◎ form -表單
　　◎ h1 - 大標題
　　◎ h2 - 副標題
　　◎ h3 - 3級標題
　　◎ h4 - 4級標題
　　◎ h5 - 5級標題
　　◎ h6 - 6級標題
　　◎ hr - 水平分隔線
　　◎ ol - 排序表單
　　◎ p - 段落
　　◎ pre - 格式化文字 將文字按照輸入格式輸出
　　◎ table - 表格
　　◎ ul - 非排序列表

常用行內元素
◎ a標籤
　　◎ b - 粗體
　　◎ br - 換行
　　◎ cite - 引用
　　◎ code - 程式碼
　　◎ em - 強調
　　◎ font - 字型設定(不推薦)
　　◎ i - 斜體
　　◎ img - 圖片
　　◎ input - 輸入框
　　◎ label - 表格標籤
　　◎ q - 短引用
　　◎ select - 專案選擇
　　◎ small - 小字型文字
　　◎ span - 常用內聯容器，定義文字內區塊
　　◎ strong - 粗體強調
　　◎ sub - 下標
　　◎ sup - 上標
　　◎ textarea - 多行文字輸入框

行內元素的寬高 margin padding 區別驗證

樣式：

        span,a{
            width:100px;
            height:500px;
        }

        span,a {
            margin-top:50px;
            margin-right:150px;
            margin-bottom:50px;
            margin-left:150px;
            padding-left:10px;
            padding-right:10px;
            padding-top:100px;
            padding-bottom:100px;
            border:1px solid yellow;
            background-color:#d1d5d3;
        }
        #div3,#div4{
            width:400px;
            height:200px;
            background-color:black;
        }

結構：

    <div id="container">
        <span>我是span </span>
        <a href="#">我是a</a>
        <div id="div4">div4</div>
    </div>

結果：
1. 驗證margin 只有水平方向有效

2. 驗證padding 只有水平方向有效 垂直方向上的不影響其他元素 圖中的黑色div

此驗證亦可參照 (http://www.cnblogs.com/mingjiezhang/p/5373667.html)

inline-block:

• 以行內元素的形式排列（橫排排列）
• 以塊級元素的樣式顯示（可以設定寬高）