浅谈为何img、input等内联元素可以设置宽高

1、CSS中元素的分类方式主要有两种：

1) 替换元素和不可替换元素

①　替换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容。

eg1：浏览器根据<img>标签的src属性的值来读取图片信息并显示。

eg2：浏览器根据<input>标签的type属性来决定显示输入框的类型。

<img>、<input>、<textarea>、<select>等都是替换元素。

可替换元素往往没有实际的内容，即是一个空元素。

②　不可替换元素

大多数元素是不可替换元素，其内容直接表现给浏览器，如p、div、span等。

2) 显示元素

①　块级元素

在横向充满其父元素的内容区域，默认独占一行。

②　行内元素

行内元素左右可以有其他元素

2、为何<img>、<input>等内联元素可以设置宽高而<span>等内联元素却不可以？

几乎所有的替换元素都是行内元素，如<img>、<input>等。

替换元素一般有内在尺寸，所以具有width和height，可以设定。

eg1：不指定<img>的width和height时，就按其内在尺寸显示，也即图片被保存时的宽度和高度。

eg2：对于<input>，浏览器有默认的样式，包括宽度和高度。