html页面设置<span>的高度和宽度

<span>标签属于行内元素(inline),所以无法设置高度和宽度;如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inle-block):

1
span{display:inlie-block;}

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

  1. 创建Html元素

    1
    2
    <span class="class1">示例文字</span>
    <span class="class1 class2">示例文字</span>
  2. 设置css样式

    1
    2
    .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方式,所以可以设置宽度和高度

posted @ 2018-08-27 08:57  万里冰封  阅读(6725)  评论(1编辑  收藏  举报