line-height继承

父元素设置ling-height;子元素继承父元素的line-height

1.ling-height:固定像素

   body{
        font-size:20px;
        line-height: 24px;
    }
    p{
        font-size: 16px;
    }

此时p元素的line-height = 24px

2.line-height: 百分比

   body{
        font-size:20px;
        line-height: 200%;
    }
    p{
        font-size: 16px;
    }

此时p元素的 行高是body 计算之后的。line-height = 200% * 20 = 40px;

3.line-height:数值

body{
        font-size:20px;
        line-height: 1.5;
    }
    p{
        font-size: 16px;
    }

此时页面上的 p 原素的行高是 1.5*16px=24px;

4、line-height: em

   body{
        font-size:20px;
        line-height: 1.5em;
    }
    p{
        font-size: 16px;
    }

此时p元素的 行高是body 计算之后的。line-height =1.5 * 20 = 24px;

猜你喜欢

转载自www.cnblogs.com/yangkangkang/p/11347675.html
今日推荐