为什么在html页面设置<span>的高度和宽度没有效果呢, <i>也是类似的

https://zhidao.baidu.com/question/301379409.html

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

span{ display :inlie- block ;}

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

1. 创建Html元素

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

设置css样式

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

观察效果：

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