CSS # 8— Inline formatting context (IFC)

Thomas Hung

Published in

Thomas 學習筆記

5 min readJun 13, 2020

在上一章節有提到 BFC 的概念，此章節我們來了解 IFC 的概念吧！

Inline formatting context 它的中文意思是行內格式化上下文簡稱 IFC，建立 IFC 則透過 inline box 來佈局。

什麼是IFC

在先前的 Normal flow 章節我們有提到內聯元素(inline)，沒有錯就是它，在 IFC 佈局方式會依 block 容器中的子元素從左邊頂部一個接著一個呈現水平排列。

//**CSS**
div{
  width:400px;
  background-color:gray;
  outline:3px black dashed;
  margin-bottom:40px;
}span{
  color:red;
}//**HTML**
<div>
  <img src="https://picsum.photos/200/100/?random=1">
  <span>我是span</span>
  <a href="https://www.google.com/webhp?hl=zh-TW&sa=X&ved=0ahUKEwiI04izqt3eAhWZa94KHWXDB-QQPAgH">Google</a>
</div>

在內聯元素(inline)中 margin 並不會發生 Collapsing margins 現象，因為要發生此現象須符合元素在垂直排列時的 margin ，但是內聯元素(inline) 並無法使用 margin-top 與 margin-button 屬性，如果想了解更清楚可以回去看CSS # 6 — Collapsing margins 章節。

如上圖我們會發現到，在父層容器寛度會位照區塊元素(block) 的寛度伸縮，高度則會依容器內的內聯元素(inline) 撐高。

在 IFC 的高度

在 IFC 佈局裡並沒有寛度與高度，而且在內聯元素(inline)中沒有 margin-top 與 margin-button 屬性，如果要設定高時可以使用 CSS 中 line-height (行高) 。

//**CSS**
div{
  width:400px;
  background-color:gray;
  outline:3px black dashed;
  margin-bottom:40px;
}span{
  color:red;
  outline:1px dashed yellow;
  line-height:3;
}img{
  outline:1px dashed yellow;
}//**HTML**
<div>
 <img src="https://picsum.photos/200/100/?random=1">
 <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.  Animi veritatis eveniet aperiam iste nulla! Saepenumquam dolore, maxime minus, recusandae sint rem nihil commodi, adipisci impedit ab similique exercitationemaccusamus.</span>
</div>

設定完 line-height 後可以將父層容器高度撐高，達到在 IFC 佈局中的高度呈現。

總結

以上介紹完，會了解到除了在 IFC 佈局中會使用內聯元素(inline)之外，還有另個 inline-block 元素它也是內聯元素(inline)的一種，簡單說明 inline-block 元素概念就是外層是內聯元素(inline) 特性且內層是區塊元素(block) 特性。

整理出以下幾個重點 :

什麼類型元素(指的是 inline 或 block)就會產生什麼種類的盒子(Box Model)
block container box 中可以同時建立 BFC 與 IFC
text-align 可以控制 block container box 中的內聯元素(inline)的對齊方式，簡單來說明為如要控制內聯元素(inline)須在父層 block container box 中設定此屬性來控制內聯元素(inline)，而非在內聯元素(inline)上設定
內聯元素(inline) 參與 IFC 佈局規則
區塊元素(block) 參與 BFC 佈局規則

…

參考： CSS # 2 — Normal flow、float、定位(Position)、z-index 、 Inline formatting context

以上是我對 CSS # 8 — Inline formatting context (IFC) 的學習筆記 😉。

***如果有任何想法，也歡迎留言與我分享~

***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***

CSS # 8— Inline formatting context (IFC)

Written by Thomas Hung