关于行内元素能否设置宽高的问题

理论上来说，行内元素区别于块级元素的一点就是它不能设置宽高。例如：

 

<div style="width: 100px; height: 100px; background-color: black">
    <span style="width: 10px; height: 10px; background-color: white"></span>
</div>

这段代码的执行结果是：只显示了一个宽高各100px的黑块，而没有显示白块。

 

但并不是所有的行内元素都不能设置宽高，替换元素就可以。首先，我们来明确一下替换元素和不可替换元素的定义。

替换元素：浏览器根据元素的标签和属性来决定元素的的具体显示内容。HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。

不可替换元素：(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

除此之外，当我们给行内元素添加属性float时，我们也可以给它设置宽高。因为不论元素本身是什么，当它浮动时，就会生成一个块级框。行内元素也就会生成相应的行内框。此时我们为它设置宽高，宽高就会起作用了。例如：

 

<div style="width: 100px; height: 100px; background-color: black">
    <span style="float: left; width: 20px; height: 20px; background-color: red"></span>
</div>

效果如图：