了解 CSS Inline 元素的 Box Model

在網頁上,所有元素均繪製為方塊狀。而「Box model」則負責描述元素的 contentpaddingbordermargin,是如何決定該元素所佔用的空間,及其與頁面上其他元素之間的關係。

根據元素的「display」屬性,其 Box 可能為 Block box 或 Inline box 之一,且其針對 Box model 的套用方式也有所不同。我們將透過本文說明 Box model 套用到 Inline box 的方法,並使用 Firefox 開發者工具的新功能針對 Inline 元素呈現 Box model。

Inline Box 與 line Box

Inline box 水平排列於 line Box 中:

2-inline-boxes

如果單一行的水平空間不足以容納所有元素,就會在第一行下方再建立另一個 Line box。一個 Inline 元素就可能被分割為兩行:

line-boxes

Inline box 的 Box model

即使 Inline box 分割超過一行,邏輯上仍是單一的 Box。也就是說,任何水平的「padding」或「border」或「margin」值,均只會套用到該 Box 所佔用的第一行至最後一行為止。

舉例來說,下方截圖以綠色強調的「span」即分割而跨了兩行。而其水平 padding 並不會套用到第一行末端,也不會影響第二行的起頭:

horizontal-padding

同樣的,任何元素所套用的垂直 padding、border、margin,均不會推擠到其上或下的任何元素:

vertical-padding

但請注意,元素仍會套用垂直的 padding 與 border,且 padding 也會推擠 border:

vertical-border-padding

如果必須調整行與行之間的高度,則請以 line-height 代替。

以開發者工具檢視 Inline 元素

在對配置問題進行除錯時,重要的是能讓工具呈現出完整的圖像。這類工具之一就是「強調器 (Highlighter)」,所有瀏覽器的開發者工具均有提供。你可透過此工具選擇元素,以進行更完整的檢驗,同時也能獲得配置的相關資訊。

layout-info

上圖範例即為 Firefox 39 的強調器,其反白的部分即為分割後橫跨數行的 Inline 元素。

強調器的顯示方式,可協助你對齊元素、提供完整的節點尺寸,並覆蓋色塊圖層以呈現 Box model。

從 Firefox 39 開始,針對分割 Inline 元素的 Box model 圖層,將顯示由該元素所佔用的各個獨立行列。在上述範例中,淺藍色顯示的即為內容區域,並分割成 4 行。另外也定義了該節點的正確 padding,即為強調器以紫色顯示的 padding 區域。

若要了解 Box model 套用至 Inline 元素的方式,則強調各個獨立行的 Box 就很重要,也能協助開發者檢查「行」與「行」之間的空隙,以及 Inline box 的垂直對齊狀況。

 

 

原文連結:Understanding the CSS box model for inline elements

 

 

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *