最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 图解line-height的使用

    正文概述 掘金(Blend)   2021-01-18   1073

    line-height是什么

    line-height属性用于设置行间的距离(行高),行高指的是字母的大小(font-size)和字母的上下边缘(字母大小 + 上下空白)。

    图解line-height的使用

    所以,文本单行占据的高度不是font-size来决定的,而是由line-height来决定的。

    line-height的写法

    关键词

    line-height: normal;
    

    取决于用户端。桌面浏览器(包括Firefox)使用默认值,约为1.2,这取决于元素的 font-family

    长度px、em

    <p>udemy</p>
    
    p{
     font-size:20px;
     line-height:30px;
    }
    
    图解line-height的使用

    字母的大小(font-size)是20 px,line- height 是30 px,上下留白为5px。

    数字

    <p>udemy</p>
    
    p{
     font-size:20px;
     line-height:2;
    }
    
    图解line-height的使用

    line- height 为font-size: 20 px 的2倍(20 × 2= 40 px),字母的大小(font-size)是20 px,上下留白为10px。

    百分比

    <p>udemy</p>
    
    p{
     font-size:20px;
     line-height:200%;
    }
    
    图解line-height的使用

    line- height 为 font-size: 20 px 的200% ,为40 px,同样上下留白为10px。。

    PS:line-height可继承,给元素设置line-height会对其内部所有的孩子都生效


    下载网 » 图解line-height的使用

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元