背景:在工作中经常出现这种情况:按照UI给的设计图和尺寸写出来渲染的页面跟设计图差别很大,尤其是文字的上下间距
原因:页面渲染出来会自带行高
解决办法:
1>单行文字:看字体大小是多大,比如字号是 32px ,那么设置它行高为32px
2>多行文字:将行高设置为 字号 + 行间距,然后写上下边距的时候,设计图上的距离减去行间距的一半
本文针对网页设计中常见的文字间距与设计图不一致的问题,详细解析了其背后的原因,并提供了实用的解决方案。包括如何调整单行和多行文字的行高及边距,确保最终渲染效果符合设计要求。
背景:在工作中经常出现这种情况:按照UI给的设计图和尺寸写出来渲染的页面跟设计图差别很大,尤其是文字的上下间距
原因:页面渲染出来会自带行高
解决办法:
1>单行文字:看字体大小是多大,比如字号是 32px ,那么设置它行高为32px
2>多行文字:将行高设置为 字号 + 行间距,然后写上下边距的时候,设计图上的距离减去行间距的一半
5964
1万+

被折叠的 条评论
为什么被折叠?