盒子问题!!!

来源:12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距(填充)

weixin_慕慕2499132

2020-02-02 22:11


http://img3.mukewang.com/5e36d63e0001deea05270548.jpg

http://img.mukewang.com/5e36d6440001a76402190150.jpg

如图所示,height设置50培训,line-height设置70px,但是盒子1仍然在border以内。

我的推测是盒子1文字顶部到border-top的值是line-height的一半,也就是35px。

但是问题来了,这里设置的字体大小是20px,如果上面推断成立,那么剩下的空间是50px-35px=15px,放不下字。

我需要代码结果图的盒子里各个数据的值(盒子大小,字的大小,填充)哪位好心人可以标出来并且解释一下,我自己已经彻底混乱了。



写回答 关注

2回答

  • shakey07
    2020-05-19 23:23:27

    line-height是文字这个元素所占的高度吧,文字本身字体高度20px,处于line-height的中线上。也就是说,文字以上border-top以下的位置是(70/2-20/2)=25px,文字下沿到box1上沿的高度是50-25=25>20,应该是放的下字的。这是我的个人理解。

  • 无聊的鸟
    2020-02-17 16:37:43

    你这个总高度好像是文字20px+padding上下就是(20px+20px)+border(1px+1px)。因为盒子是被内容给撑大的,一般不会设height!

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225293 学习 · 18230 问题

查看课程

相似问题