在第七天，我們曾提到網頁元件可以被分為「區塊家族（像div、p）」與「行內家族（像span、a）」，當時我們了解到有些標籤會霸道地獨佔一整行，有些則會排在同一行。
到了CSS的世界，決定元件究竟要扮演站一整排的區塊還是可以排在同一行內的區塊，關鍵就是 display（元素顯示模式）屬性，透過調整display，我們可以改變元件的排列基因與幾何特性，今天我們將介紹於前端開發最基礎、也最常遇到的三大模式：block、inline 與 inline-block。
display:block;（區塊模式）這是所有區塊元素的預設基因。
width）與高度（height），如果沒有設定寬度，預設會自動填滿父容器的100%寬度，內邊距（Padding）與外邊距（Margin）在四個方向都能運作。display:inline;（行內模式）這是所有行內文字標籤的預設基因。
display: inline-block;（行內區塊模式）這是一種結合了前兩者優點的特別模式，也是網頁排版極其常用的模式。
inline的特性，不會自動換行，可以多個元件在同一行內並排呈現。block的強大能力，可以自由設定寬度與高度，且上下左右的Padding與Margin都能精準推開空間，這在製作導覽列的按鈕、電商的商品卡片時非常實用。<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Day14 display 對比範例</title>
<style>
.base {
width: 150px;
height: 50px;
margin: 10px;
background-color: #34495e;
color: white;
text-align: center;
}
/* 區塊模式 */
.block-mode {
display: block;
}
/* 行內模式（設定的寬高將會失效） */
.inline-mode {
display: inline;
background-color: #e74c3c;
}
/* 行內區塊模式（可並排，又有寬高） */
.inline-block-mode {
display: inline-block;
background-color: #2ecc71;
}
</style>
</head>
<body>
<h2>1. 區塊模式 (block)：獨佔一行</h2>
<div class="base block-mode">區塊 A</div>
<div class="base block-mode">區塊 B</div>
<h2>2. 行內模式 (inline)：無法設定寬高</h2>
<div class="base inline-mode">行內 A</div>
<div class="base inline-mode">行內 B</div>
<h2>3. 行內區塊模式 (inline-block)：可並排且保有寬高</h2>
<div class="base inline-block-mode">行內區塊</div>
<div class="base inline-block-mode">行內區塊</div>
</body>
</html>
在執行上面程式碼後，你可以明顯地看到：
1.第一組區塊雖然很短，但B依然被擠到了下一行。
2.第二組紅色的行內元素緊貼在一起，且我們給的width: 150px與 height: 50px完全被忽略了。
3.第三組綠色的行內區塊在同一行水平並排，並且維持著我們設定的長方形大小。
今天我們釐清了display屬性的初階三大排列觀念（block、inline、inline-block），這讓我們可以打碎標籤的限制，決定元件要如何並排或換行。
在明天，我們將迎來 CSS排版中專門用來處理「圖文圍繞」或是「傳統左右並排」的另一個經典屬性：浮動（Float），去看看在現代大框架流行之前，工程師是怎麼用浮動來幫網頁分左右邊的。
iThome鐵人賽
看影片追技術