爲何img標籤是inline元素還能夠設置寬高？

以前刷面試題，看到一道題目 如題！？驚到了，之前寫代碼怎麼沒注意到這樣的細節 (￣▽￣)"
真是才疏學淺了。
參考：可替換元素 - CSS：層疊樣式表 | MDN

---

原來CSS中還有一個概念：可替換元素

MDN上是這麼解釋的：

  在 CSS 中，可替換元素（replaced element）的展示效果不是由 CSS 來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立於 CSS 的。
  簡單來講，它們的內容不受當前文檔的樣式的影響。CSS 能夠影響可替換元素的位置，但不會影響到可替換元素自身的內容。例如 <iframe> 元素，可能具備本身的樣式表，但它們不會繼承父文檔的樣式。
典型的可替換元素有：

• <iframe>
• <video>
• <embed>
• <img>

有些元素僅在特定狀況下被做爲可替換元素處理，例如：

• <input>

"image" 類型的 <input> 元素就像<img>同樣可替換

• <option>
• <audio>
• <canvas>
• <object>
• <applet>（已廢棄）

CSS的 content 屬性用於在元素的  ::before 和 ::after 僞元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。

這些元素有一個共性，就是他們的內容都不是經過在標籤內添加文本，而是經過某個屬性（src、data（<object>）、label（<option>）或js控制（<canvas>））來顯示內容的。
可替換元素擁有內置寬高，他們能夠設置width和height。他們的性質同設置了display:inline-block的元素一致。

ps：我在看別人的資料的時候，看到個誤區，textarea、button等並非可替換元素，他們是瀏覽器默認的內聯塊元素。

---

額外知識：

1. 當須要給圖片設定固定寬高，並須要不拉伸時（等相似狀況），

1）背景圖，background-size配合background-position。（適用於裝飾性圖片）
background-size: [ <length-percentage> | auto ]{1,2} | cover | contain;
background-position: [ left | center | right | top | bottom | <length-percentage> ]{1,2}
background-position值還能夠是邊偏移量：例：background-position: bottom 10px right 20px;
2）img元素，object-fit配合object-position。（適用於內容圖片）
object-fit: fill | contain | cover | none | scale-down;
object-position: 同background-position;
object-position和background-position的區別在於默認值不一樣，
object-position默認爲50% 50%;
background-position默認爲0% 0%;

2.圖片img元素下面有一段空白區域，是由於vertical-align和line-height。

解決：img元素display: block;
圖片來自：CSS深刻理解vertical-align和line-height的基友關係

3.vertical-align 只對行內元素、表格單元格元素生效。
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;

圖片來自：深刻理解 CSS 中的行高與基線