文章將陸續整理並更新至個人部落格。

前言

替換元素雖然預設為 display: inline，但又與一般常見的 inline element 不同，準確來說，它是 inline-level element 中的 atomic inline-level element。

在先前文章中介紹 inline 時提到，非替換的 display: inline 元素無法利用 width 與 height 屬性改變寬高，且僅有 line-height 會影響 line box 高度，而 display: inline 的替換元素不僅可以透過 width 與 height 屬性設定寬高，且其整個 box model 的高度皆會影響 line box。

替換元素(Replaced element)

MDN 定義 中提到，所謂的「替換元素 (replaced element)」，即是該元素所呈現的內容不在 CSS 的控制範圍之內，其所呈現的內容均獨立於 CSS 之外(為外部連結)，例如 <img> 的內容是取決於 src 屬性。

常見的替換元素包含 <img>、<object>、<video>，或如 <textarea> 與 <input> 的表單元素，某些元素，像是 <audio> 或 <canvas> 只有在特殊情況下才是替換元素。若是透過 CSS content 屬性所插入的物件，則稱為「不具名替換元素 (Anonymous replaced elements)」。

替換元素的特性：

• 預設 display 為 inline，為 inline-level element 之一。

• 可以透過 width 和 height 屬性改變寬高。

• 通常本身具有固定尺寸(intrinsic dimension)，例如圖片引入時就有其既有的大小。

• 通常具有固定比例(intrinsic ratio)，所以調動 width 時，height 會依照比例自動調整。

• 整個盒模型(box model)的高度，即內容區、內距、邊框、外距的高度皆會影響 line box高度。

• 可能本身帶有已定義的基線(baseline)。

• 替換元素無偽元素(pseudo-elements)。

• 沒有內部顯示(inner display type)，所以不會建立格式化上下文(formatting context)。

註：不屬於替換元素(replaced element)的就稱為非替換元素(non-replaced element)。

順帶一提一個常見的現象： <img> 與容器間出現縫隙。

<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/CSS.3.svg" alt="CSS logo"/>
</div>

div {
  border: 1px solid #000;
  width: 150px;
}

img {
  border: 1px solid #FFAB00;
  width: 100%;
}

下圖中，橘色框線為 <img> 的邊框(border)，圖形中可清楚看到 <img> 與容器 <div> 底部有縫隙，這是因為替換元素 <img> 預設為 display: inline，屬於 inline-level element 之一，生成 inline-level box，會參與 IFC 佈局，故在容器 <div> 裡面會產生一個 line box，而替換元素 <img> 預設底部會向基線(baseline)對齊。

簡單解決方法：

• 在容器 <div> 設定 font-size = 0。
• 讓圖片的 verticle-align 的值不為 baseline，例如 middle 或 top。
• 讓 <img> 變為非 inline-level element，例如 display: block，此時它不再是 inline-levle element，不會參與 IFC，也就不會產生 line box，當然也就沒有基線(baseline)。

替換元素就介紹到這邊囉！

明天見啦～

參考資料

HTML Standard-Replaced elements
W3C-Line height calculations
W3C-replaced element
W3C-Box Layout Modes: the display property
MDN-Replaced element