如图所示,height设置50培训,line-height设置70px,但是盒子1仍然在border以内。
我的推测是盒子1文字顶部到border-top的值是line-height的一半,也就是35px。
但是问题来了,这里设置的字体大小是20px,如果上面推断成立,那么剩下的空间是50px-35px=15px,放不下字。
我需要代码结果图的盒子里各个数据的值(盒子大小,字的大小,填充)哪位好心人可以标出来并且解释一下,我自己已经彻底混乱了。
line-height是文字这个元素所占的高度吧,文字本身字体高度20px,处于line-height的中线上。也就是说,文字以上border-top以下的位置是(70/2-20/2)=25px,文字下沿到box1上沿的高度是50-25=25>20,应该是放的下字的。这是我的个人理解。
你这个总高度好像是文字20px+padding上下就是(20px+20px)+border(1px+1px)。因为盒子是被内容给撑大的,一般不会设height!