zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    《人月神话》阅读笔记2
    【个人作业】单词链
    【个人作业】找水王
    【团队】 冲刺一(10/10)
    【团队】 冲刺一(9/10)
    【个人作业】单词统计续
    【团队】 冲刺一(8/10)
    【团队】 冲刺一(7/10)
    【团队】 冲刺一(6/10)
    【团队】 冲刺一(5/10)
  • 原文地址:https://www.cnblogs.com/aobingyan/p/3898302.html
Copyright © 2011-2022 走看看