请问line-height,会影响A和B的距离么?

请问line-height,会影响A和B的距离么?

演示模块里line-height如果有值,距离又该如何计算?麻烦举两个例子。

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,line-height是设置自身的行高,不会影响A和B之间margin设置的距离。

可以给p标签添加背景颜色,方便查看效果。示例:

(1)行高为1时,A和B之间的间距是15px,如下:

https://img1.sycdn.imooc.com//climg/6142fbe309986ce217020662.jpg

(2)line-height调整为3时,A和B之间的间距依然是15px,如下:

https://img1.sycdn.imooc.com//climg/6142fbbd097e5d6819020688.jpg

如果想要计算A和B文字之间的间距,那么可以参考如下解析理解:

1、 以line-height的值是3为例,由于line-height设置为数字时,根据自身的fong-size属性计算可以得到元素此时的高度为:48px = 16px * 3

2、文字上下方的空白间距分别为: (元素高度 - 文字所占高度) / 2 = (48px - 16px) / 2 = 16px

3、那么内容分别为AAA和BBB两个p标签中的文字间距为:

 AAA所在p标签文字下方的空白间距 + 两个P标签之间的margin间距 +  BBB所在p标签文字上方的空白间距。即: 16px + 15px + 16px = 47px 。所以文字之间的间距为47px

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师