上一篇我們知道了block box會參與BFC的佈局 ; 這篇所說的IFC則是inline box所參與的佈局，而IFC是block contaner box創造出給inline box遵從的佈局規則。

IFC的佈局特性：

• box的左外緣會貼著block container的左內緣，一個接一個水平排列（若normal flow是由右往左就反過來）。

  <div>
    <img src="pig.png">
    <span>我是span</span>
    <a href="">我是連結</a>
    <input type="text">
  </div>
  

  

• box與box之間由水平方向的margin隔開，沒有margin collapse的現象。

• box所遵從的水平行叫做line box，line box的寬度隨著block container的寬度伸縮，高度則是被inline box撐高。

  

  

  line box的寬度也會被float元素影響（這會在float屬性介紹到）。

IFC裡的高度

IFC裡的佈局，沒有垂直的margin，而inline box本身也無法設定寬高。當我們想要決定水平排列的inline box高度時，可以使用CSS的屬性line height（行高）。

span {
  background-color: pink;
  line-height: 3;
}

替換元素可以調整寬高

雖說inline box不能夠像border box用width跟height屬性調整寬高 ; 可是在HTML裡有一種叫replaced element（替換元素）是可以調整寬高的。

我們曾提過replaced element的特殊性是，它的內容不是文檔的內容，它是透過引入外部資源來呈現內容的，像是<img>、
<video>、<input>（在HTML spec被歸類為replaced element ; 在CSS裡被歸類為non-replaced element，然而它也能調整寬高，故列於此）。

• <img>跟<input>都為inline元素，但它們都可以使用width跟height調整寬高：

  img {
      width: 300px;
  }
  
  input {
    width: 300px;
    height: 50px;
  }
  

  替換元素的box寬高改變了，line box也同時被撐高：
  

目前為止都是用元素本身的類型來講解block box與inline box參與的formatting context，接下來就會來認識display這個屬性值，它可以改變box本身參與的formatting context，也可改變box內部的formatting context，提供給後代元素的佈局環境。那明天見～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。