当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS line-height用法及代码示例


CSS中的line-height属性用于设置用于行的空间量,例如文本中的空间。不允许使用负值。

用法:

line-height:normal|number|length|percentage|initial|inherit;

属性值


  • 正常:此模式代表法线高度。这是默认值。
    line-height:normal;
    

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>CSS line-height Property</title> 
            <style> 
                .geek { 
                  line-height:normal; 
                  background:green; 
                  color:white; 
                } 
            </style> 
        </head> 
        <body style = "text-align:center;"> 
            <h1 style = "color:green;"> 
                GeeksforGeeks 
            </h1> 
              
            <h2> 
                CSS line-height Property 
            </h2> 
              
            <div class="geek"> 
                A computer science portal for geeks.<br> 
                This div has line-height:normal; 
            </div> 
        </body> 
    </html>

    输出:
    lineheight

  • 数:该值是一个无单位数乘以当前的font-size来设置行高。在大多数情况下,这是设置line-height并避免由于继承而导致意外结果的首选方法。
    line-height:number;
    

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>CSS line-height Property</title> 
            <style> 
                .geek { 
                  line-height:2.5; 
                  background:green; 
                  color:white; 
                } 
            </style> 
        </head> 
        <body style = "text-align:center;"> 
            <h1 style = "color:green;"> 
                GeeksforGeeks 
            </h1> 
              
            <h2> 
                CSS line-height Property 
            </h2> 
              
            <div class="geek"> 
                A computer science portal for geeks.<br> 
                This div has line-height:2.5; 
            </div> 
        </body> 
    </html>

    输出:
    lineheight

  • 长度:在此模式下,将指定固定的行高。
    line-height:length;
    

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>CSS line-height Property</title> 
            <style> 
                .geek { 
                  line-height:2em; 
                  background:green; 
                  color:white; 
                } 
            </style> 
        </head> 
        <body style = "text-align:center;"> 
            <h1 style = "color:green;"> 
                GeeksforGeeks 
            </h1> 
              
            <h2> 
                CSS line-height Property 
            </h2> 
              
            <div class="geek"> 
                A computer science portal for geeks.<br> 
                This div has line-height:2em; 
            </div> 
        </body> 
    </html>

    输出:
    lineheight

  • 百分比:此模式用于以当前字体大小的百分比设置行高。
    line-height:percentage;
    

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>CSS line-height Property</title> 
            <style> 
                .geek { 
                  line-height:150%; 
                  background:green; 
                  color:white; 
                } 
            </style> 
        </head> 
        <body style = "text-align:center;"> 
            <h1 style = "color:green;"> 
                GeeksforGeeks 
            </h1> 
              
            <h2> 
                CSS line-height Property 
            </h2> 
              
            <div class="geek"> 
                A computer science portal for geeks.<br> 
                This div has line-height:150%; 
            </div> 
        </body> 
    </html>

    输出:
    lineheight

  • 初始:此模式用于将此属性设置为其默认值。
    用法:
    line-height:initial;
    

支持的浏览器:下面列出了line-height属性支持的浏览器:

  • 谷歌浏览器1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 7.0
  • 苹果Safari 1.0


相关用法


注:本文由纯净天空筛选整理自Vishal Chaudhary 2大神的英文原创作品 CSS | line-height Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。