CSS教學-關於display:inline、block、inline-block的差別

YTCLion
Oct 22, 2019

--

什麼是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,但並非不能設定,是排版不會隨著設定改變,字仍在行內,其他行並不會被推開。

範例
範例 1:display:inline
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,但仍會占滿一整行

範例 2 : display:block
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
.可水平排列

範例 3 :display:inline-block
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

--

--