今天遇到了行高与设计稿容器大小的问题,如果按照设计稿的容器高度和行高,文字必定会溢出。需要灵活应用容器的高度与外边距调整高度。

CSS中的line-height属性是控制一行文字的高度,也就是行与行之间的间距。

line-height

像上面的设计图,导出的CSS代码如下:

width:620px;
height:94px;
font-size:38px;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height:58px;
margin-top:61px;
margin-left:40px;
margin-right:40px;
margin-bottom:36px;

可以看到行高为58px,总高度为94px,而两行文字的总高度为58*2=116。这就导致文字实际高度大于包含文字的框的高度,如果加上overflow: hidden就能很明显的看到。

over-flow:hidden

这种情况需要增加容器的高度,减少外边距。

height:114px;
margin-top:51px;
margin-bottom:26px;

原因为PS的textbox首行和尾行不包含line-height的上边距和下边距,而浏览器是包含的,导致文字的实际大小大于标注的包含框的大小。

解决方法为增加容器高度,减少外边距的高度。要增加的容器高度为行高减去字体大小,要减少的外边框的高度为行高减去字体大小的二分之一。这样就保证了文字实体与图片的间距为设计稿的间距。

原文链接:https://marskid.net/2019/05/05/css-line-height/