此篇會介紹 Bootstrap 常用的對齊語法注意事項以及常見問題分為上下兩集。上集介紹 display、spacing。

Display

設置每個元素的排版方式。

display 是排版屬性中最重要屬性之一，常用的屬性有，inline、block、inline-block、none、grid、flex、table，此會針對前三個屬性做介紹（其餘會在其它篇有詳細介紹），更多屬性請參考 W3C

inline 行內元素

特性：元素水平排列

• 行內元素會並排在同一行。

限制：

• 無法換行。
• ⚠️ 子元素只能放 行內元素。
• 無法修改寬高（width、height），根據內容而定。
• 無法推擠出垂直方向的間距（margin、padding）。

常見行內元素標籤：

• <span>、<a>、<strong>、<img>

符合 W3C inline-level 定義的行內元素：

• inline
• inline-table
• inline-block

block 區塊元素

特性：元素垂直排列

• 元素強迫換行，呈現垂直排列。
• 子元素可以包含 區塊元素。
• 高寬（width、height）任意修改。
• 元素寬度盡可能佔滿整個父元素寬度。

限制：

• 無法並排

常見區塊元素標籤：

• <div>、<ul> <li>、<p>、<h1>~<h6>

inline-block

特性：

• 為了解決行內元素無法推擠出垂直方向間距的問題。
• 融合 inline、block 的優點，使物件有並排的特性，且可以調整寬度、高度、間距。

常見行內區塊元素：

• <button>, <input>, <select>

inline-block 間隙留白問題

• 原因：

  • 空白字元由 HTML 標籤之間的 空格 或 換行 所造成的。

• 三種解決方法：

  • 兩個 <div> 連在一起寫。
  • 負值 margin。
  • 父元素設置 font-size: 0;、子元素也要賦予 font-size 值。（比較常用）

Spacing

margin、padding 推擠出來的空間稱為 間隔、間距。

前情提要，上一集 CSS 盒模型（box model），有介紹到基礎用法，因此這邊會著重在介紹 auto、0 用法以及注意事項。

語法簡化

• 四個值：margin: 16px 16px 16px 16px;
  • 順序是上、右、下、左。
• 兩個值：margin: 16px 8px;
  • 代表上下、左右（margin: 16px 8px 16px 8px;）。
• 一個值：margin: 16px;
  • 代表上右下左相同（margin: 16px 16px 16px 16px;）。
• 三個值：margin: 16px 8px 4px;
  • 代表上、水平、下（margin: 16px 8px 4px 8px;）。

auto

• 常用於平均分配子元素的間距，使其達到置中的效果(通常用於水平置中)。

0

• 常用於自動分配剩餘空間，使其達到靠上下左右某一邊。

負數值

• 用於元素重疊，同個層級，右邊會壓過左邊、下面會壓過上面。

水平置中

是 margin: 0 auto 0 auto; 的簡寫，意思是上下間距為 0，左右間距均分。

• 語法：margin: 0 auto;
• 限制：要設置 width 才會有效果。

垂直置中

由於需要加上 absolute，會在後面章節介紹。有需要可以先參考以下兩個文章：

• 卡斯伯老師的 CSS 5種垂直置中方法，使用 absolute + margin auto的方法。
• 金魚腦大大的 使用 absolute + margin負值來達到垂直置中的目的，使用 absolute + margin 負值 的方法。

水平靠右

設置 上、右、下 間距為 0，將全部間距分配到左邊，使右邊間距為 0。

• 語法：margin: 0 0 0 auto;
• 限制：要設置 width 才會有效果。

統整四個重點

1. 參數 auto 會自動分配間距。
2. 參數 0 會貼齊邊界。
3. 上下間距會重疊（從下方圖片可以看出中間的 <p> 間距只有 16 px但卻貼齊上下兩個 <p>）。

4. 行內元素垂直 margin沒有效果（從下方圖片可以看到左邊 <span> 只有推擠出水平方向的間距）。

獲得技能 水刀、水壓推進