为什么img标签是inline元素还可以设置宽高？

之前刷面试题，看到一道题目 如题！？惊到了，以前写代码怎么没注意到这样的细节 (￣▽￣)"
真是才疏学浅了。
参考：可替换元素 - CSS：层叠样式表 | MDN

---

img默认display: inline
原来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等并不是可替换元素，他们是浏览器默认的内联块元素。

display: inline-block;

---

额外知识：

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 中的行高与基线