img标签是行内元素，为什么却能设置宽高？

img 标签虽然被归类为行内元素 (inline element)，但它同时也是一个 替换元素 (replaced element)。 这正是它能够设置宽度和高度的原因。

以下是详细解释：

• 行内元素 (Inline Element): 通常在文本流中水平排列，不会另起一行。它们的宽度和高度由内容决定，并且不能直接设置 width 和 height 属性。例如 <span>、a、em 等。

• 块级元素 (Block Element): 会占据一行，并且可以设置 width、height、margin、padding 等属性。例如 <div>、<p>、<h1> 等。

• 替换元素 (Replaced Element): 这类元素的内容由外部资源决定，例如图片、视频、音频等。浏览器会根据外部资源的尺寸来决定元素的大小，即使你没有显式地设置 width 和 height。 同时，替换元素也允许你通过设置 width 和 height 来改变显示尺寸，这会覆盖其固有尺寸，并可能会导致图像拉伸或压缩。 img、video、iframe、input[type="file"] 等都属于替换元素。

因此，img 标签虽然是行内元素，但由于它是替换元素，浏览器会将其内容视为一个独立的块状盒子进行渲染，允许你设置 width 和 height 来控制其显示尺寸。

总结:

img 的 "行内" 特性主要体现在它会尽量与周围文本在同一行排列，但它的尺寸表现却类似于块级元素，这是因为它属于替换元素，其内容和尺寸由外部资源决定，并且可以被 width 和 height 属性修改。