解决页面文字渲染自带间距的问题

本文针对网页设计中常见的文字间距与设计图不一致的问题,详细解析了其背后的原因,并提供了实用的解决方案。包括如何调整单行和多行文字的行高及边距,确保最终渲染效果符合设计要求。

背景:在工作中经常出现这种情况:按照UI给的设计图和尺寸写出来渲染的页面跟设计图差别很大,尤其是文字的上下间距

原因:页面渲染出来会自带行高

解决办法

1>单行文字:看字体大小是多大,比如字号是 32px ,那么设置它行高为32px

2>多行文字:将行高设置为 字号 + 行间距,然后写上下边距的时候,设计图上的距离减去行间距的一半

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值