• line-height:2和line-height:2em的区别,它们是有区别的


    line-height:2是2倍的意思,如果内部有不同大小文字的情况下,以最大文字为倍数。


    line-height:2em也是2倍文字大小的意思,但如果内部有大文字,它还是会以父容

    器的大小来计算。

    请看如下代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>line-height:2和line-height:2em的区别,它们是有区别的</title>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    h2 { margin: 30px 0; }
    body { font-size: 14px; }
    .lh2 { line-height: 2; }
    .lh2em { line-height: 2em; }
    span { font-size: 60px; }
    </style>
    </head>
    <body>
    <div style="300px;">
            <h2>line-height:2</h2>

            

    <div class="lh2">我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高<span>我是大文字</span>我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高</div>
            <h2>line-height:2em</h2>
            <div class="lh2em">我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高<span>我是大文字</span>我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高</div>
    </div>
    </body>
    </html>

    所以这里要针对情况来处理,建议使用2,而不是2em。

  • 相关阅读:
    EditPlus等编辑器选中列(块)的方法
    构建Springboot项目的3种方式
    STS各版本下载
    Spring Boot 各版本的Java版本要求
    Maven安装
    Linux find命令:在目录中查找文件(超详解)
    rpm命令怎么指定安装位置
    CentOS6.8安装RabbitMQ
    codeforces459D:Pashmak and Parmida's problem
    codeforces 705B:Spider Man
  • 原文地址:https://www.cnblogs.com/aobingyan/p/3898302.html
Copyright © 2020-2023  润新知