倘若不斷向深處扎根，就能茁壯成長 - RM

前言

昨天我們聊到了 block-level，接續昨天的介紹，今天我們要來看的是 inline-level box，那事不宜遲，我們開始吧～

Inline-level elements and inline boxes

規範直通車：
Visual formatting model
規範定義：
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generateinline-level boxes, which are boxes that participate in an inline formatting context.

• inline-level elements 代表那些元素內容不會構成新的 block。
• inline-level box 參與 IFC。
• inline 又可以當作 “inline-level box”、“inline box” 的簡寫呦～
• inline box 是當同時為 inline-level box 且內容會同時參與它的 containing 生成 IFC
• atomic inline-level boxes 是為 inline-level box 但內容會以一個塊的概念去參與在 IFC 中（好比：inline-block、inline-table）

舉例來說，組成 inline-level 的 display 屬性值包含：

1. inline
2. inline-block
3. inline-table
4. inline-flex
5. inline-grid
6. ...。

Anonymous inline boxes

block container 中直接包含的文字都會被視為匿名狀態的 inline element，舉如下的例子來說。

<p>Some <em>emphasized</em> text</p>

在這裏 emphasized 本身的 inline box 是由一個 inline element <em>生成，Some 以及 text 是直接在 <p> 這個 block container 中，這時候它們就會被 <p> 生成的 Anonymous inline boxes 所包覆，因為他們本身沒有關聯的 inline element。

如同上述的 Anonymous inline boxes 中：

• 可繼承的 CSS 屬性值會繼承自 block 父元素。
• 不可繼承的 CSS 屬性值會是 initial 初始值。

結語

以上講述了 inline-level box 的定義以及舉例說明了 Anonymous inline boxes 上產生的行為，當我們定義了一個 inline 時其實它所作用的行為比我們想像的更精密且複雜，若是想要參照中文也可以使用 MDN 上的 视觉格式化模型 - Web 开发者指南 | MDN 搭配規範參考呦，我們明天見～

參考資料：

CSS Display Module Level 3
Visual formatting model

以上的部分有任何錯誤的地方，歡迎指正呦～非常感謝～～XD