# display: inline, block 跟 inline-block 的差別
###### tags:`css`
每一個html標籤元素都會有一個預設的display屬性，標籤基本上大部分可分為兩種顯示模式，一種是行內元素(inline)，另一種為區塊元素(block)，我們可以在CSS內加入display來賦予新的屬性，以改變其原本特性，利用它來呈現我們想要的排版。

### 區塊元素(block)
標籤：div、ul、li、p、h1、nav、section、header、footer、form
．元素寬度預設會撐到最大，==佔滿一整行(寬度佔全部)==
．可以設定長寬/margin/padding，==會換行==

### 行內元素(inline)
標籤：span、a、b、imput、img、td、strong
．元素可在同一行內呈現，圖片或文字均==不換行==，也不會影響其版面配置
．inline裡面不能放block
．==不可設定長寬，元素的寬高由它的內容撐開==
．常聽到行內元素不能設定上下margin/padding，但並非不能設定，是排版不會隨著設定改變，字仍在行內，其他行並不會被推開。可以在css加入display:block;就可以設定上下margin/padding了

### 行內區塊(inline-block)
．以inline的方式呈現，但同時擁有block的屬性
．可設定元素的寬高/margin/padding
．可水平排列