了解display屬性很重要的，在網頁設計中的排版需要很清楚知道display屬性
才能在需要的時候，依據自己想要呈現的樣貌，製作出符合需求的版面

display屬性分為：block(區塊元素）、inlink(行內元素）、inlink-block(行內區塊）
在CSS中可以設定display屬性，block(區塊元素）<--> inlink(行內元素）可互換

block(區塊元素）

• 預設寬度是100%
• 可以設定寬度、高度
• 元素上下呈現
• 會自動換行
• 可設定margin(上下左右）
• 可設定padding(上下左右）
• ex:div、ul、li、p、h1...

inlink(行內元素）

• 同一行呈現
• 圖片、文字都不換行
• 寬度、高度不可設定，由內容撐開
• margin只能設定左右
• padding只能設定左右
• ex:span、a、input、img...

inlink-block(行內區塊）

是inlink也是block

• 不會自動換行
• 可以設定寬度、高度
• 可設定margin(上下左右）
• 可設定padding(上下左右）
• ex:img、input、select、button …等

使用firefox瀏覽器按f12時可以看到網頁上的元素是屬於哪一種display屬性

如果是inlink，設定寬度、高度時會提示對此元素沒有影響(作用)

底下的例子是同樣為<a>，原本使屬於inlink(行內元素）
在CSS裡面加上display:block 就可以將inlink(行內元素）改變為block(區塊元素）