关于meau-item的行高问题

关于meau-item的行高问题

老师,视频中老师说由于底部有边框所以line-height设置为66px,使之更准确的垂直居中,我觉得很奇怪,在line-height比height大的情况下,文本应该会偏下一点,那这样的话不是距离63px的a标签底部边框更近了吗?也就是"更不居中"了。

我想到的就两种情况:1.在a标签没有设置底部边框时,meau-item的高度为64,line-height也为64,此时文本在meau-item内垂直居中,如图:

http://img1.sycdn.imooc.com//climg/5f623d98097897b803740195.jpg

2.a标签设置了底部边框(这里为了更突出现象,将边框设置成10px,),相应的a标签高度height设置为64-10=54px,此时可以看到在以a标签底边框作为整个容器的底部时,文本看起来不太居中了,有点偏下:

http://img1.sycdn.imooc.com//climg/5f623f7e095293fc02970159.jpg

此时应该将meau-item的line-height设置成和a标签高度一致,也就是54px,这时文本才看起来居中,也就是在a标签内居中:

http://img1.sycdn.imooc.com//climg/5f62400409da2e5503280159.jpg

但是视频中老师的做法反而是将line-height的高度调大到66px,这里我实在是想不通,可能是我没有真正理解老师口中说的"居中",请老师解答下,谢谢!

正在回答

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

2回答

同学你好,同学学习很细心呐,这里的边框是在a标签上,所以line-height不用加上2px,老师也会将同学的建议反馈给相关人员的,继续加油!

祝学习愉快~

  • 慕无忌3584439 提问者 #1
    额。。我就是有点强迫症,哪怕只要看到老师说的和我理解的有一点不一样,我都会怀疑自己对这个知识点理解得有问题,然后就一直想。。。现在通了舒服多了,谢谢老师!
    2020-09-17 18:39:44
好帮手慕阿园 2020-09-17 13:38:53

同学你好,同学的理解是正确的,这里老师设置成66px是加上了底边框的高度,只是实现了整体看起来都是垂直居中的,所以这里不设置也是可以的

关于同学所说的两点,老师测试,实现效果是跟同学的一致,这里同学的想法是合理的

祝学习愉快

  • 提问者 慕无忌3584439 #1
    老师你好,但是meau-item是没有设置底边框的啊,那条白色底边框是里面的a标签的,如果是meau-item的底边框设置了2px,meau-item的line-height也要相应增加2px这是可以理解的,因为高度要和行高一致嘛,但是底边框是a标签的啊。。。。
    2020-09-17 17:13:41
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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