Question

为什么在html页面设置<span>的高度和宽度没有效果呢

Answer 1

<span>标签属于行内元素（inline），所以无法设置高度和宽度；如果需要改变其宽高，就需要将其转变为块体元素（block）或行内块体元素（inle-block）：

span{display:inlie-block;}

实例演示：下面给出了两种样式，class1设置span 的宽高，class2改变span为行内块体元素，然后给其中一个span添加class1样式，另一个同时添加class1和class2样式，观察效果

1. 创建Html元素

   <span class="class1">示例文字</span><br>
   <span class="class1 class2">示例文字</span>

2. 设置css样式

   .class1{width:200px;height:30px;line-height:30px;padding:10px;margin:20px;border:1px solid green;}
   .class2{display:inline-block;}

3. 观察效果：
   

   第一个span因为默认为行内元素，所以宽度和高度的设置不起作用；第二个span已经改为inline-block方式，所以可以设置宽度和高度

   

Answer 2

span是针对行元素的标签，与div这样的块元素不同，所以你设置span，仅对其中的文字元素有效，比如设置颜色、字符大小等，其他的就没用了。

追问

我给span定义样式也不可以固定他的宽度和高度吗

追答

不可以的，定义也是没有效果。

Answer 3

设置它的display属性为block，块级的就行了!