zoukankan      html  css  js  c++  java
  • 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方式,所以可以设置宽度和高度

  • 相关阅读:
    一轮项目冲刺9
    一轮项目冲刺8
    一轮项目冲刺7
    一轮项目冲刺6
    一轮项目冲刺5
    一轮项目冲刺4
    一轮项目冲刺3
    一轮项目冲刺2
    一轮项目冲刺1
    移山小分队---每日记录01
  • 原文地址:https://www.cnblogs.com/wanlibingfeng/p/9540225.html
Copyright © 2011-2022 走看看