什麼是display(顯示模式)?
每一個html標籤元素都會有一個預設的display屬性，標籤基本上大部分可分為兩種顯示模式，一種是行內元素(inline)，另一種為區塊元素(block)，我們可以在CSS內加入display來賦予新的屬性，以改變其原本特性，利用它來呈現我們想要的排版。
誰是區塊元素(block)? 誰是行內元素(inline)?
在使用並設定display屬性時，應了解標籤原本的屬性是區塊元素還是行內元素，以下為兩者常見的標籤：
常見區塊元素標籤：div、ul li、p、h1
常見行內元素標籤：span、a、input、img
inline、block、inline-block差別在哪呢?
Inline行內元素
．元素可在同一行內呈現，圖片或文字均不換行，也不會影響其版面配置
．不可設定長寬，元素的寬高由它的內容撐開
另外，常聽到行內元素不能設定上下margin/padding，但並非不能設定，是排版不會隨著設定改變，字仍在行內，其他行並不會被推開。
css
.box_inline{
border:1px solid black;
padding:10px;
margin:10px;
background-color: yellow;
display:inline;} 由上圖範例1可以看到：
．設定display:inline就會使得原本div的block改變成inline屬性
．雖有設定padding及margin，但元素上下並不會把其他行推開，但若設定框線或背景顏色就會發現事實上會使得其他行被蓋到。
Block區塊元素
．元素寬度預設會撐到最大，使其占滿整個容器
．可以設定長寬/margin/padding，但仍會占滿一整行
css
.box_block{
border:1px solid black;
padding:10px;
margin:10px;
background-color: yellow;
width: 150px;
display:block;}
/*div原屬性即為block*/..
..
..
範例2 可以發現雖然可以設定寬高/padding/margin，但其屬性仍會向右占滿容器，下個元素就會換行來呈現，並不會並排。
inline-block行內區塊
．以inline的方式呈現，但同時擁有block的屬性
．可設定元素的寬高/margin/padding
．可水平排列
css
.box_inline-block{
border:1px solid black;
padding:10px;
margin:10px;
background-color: yellow;
display:inline-block;}..
範例 3 可以發現設定display:inline-block 後，即可同時擁有block可設定寬高的屬性，但其排版仍像inline屬性，並不會向右占滿整個容器。
display還有很多其他屬性，我們就先介紹到這裡;}
以上範例也可以在codepen裡面自己嘗試↓↓↓↓↓
https://codepen.io/YTCLion/pen/eYYgyyg
參考資料：
https://www.w3schools.com/cssref/pr_class_display.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/display
http://zh-tw.learnlayout.com/display.html
