                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

盒子问题！！！

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

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

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

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

weixin_慕慕2499132

2020-02-02

源自：初识HTML(5)+CSS(3)-升级版 12-12

关注问题我要回答

708

操作

收起

2 回答

shakey07
2020-05-19

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

0 回复有任何疑惑可以回复我~

收起回答

无聊的鸟
2020-02-17

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

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

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

参与学习 1225793 人
解答问题 18234 个

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

进入课程

本课相似问答

7 回答css盒子问题

5 回答盒子位置问题

5 回答盒子大小问题。

2 回答关于小盒子在大盒子内居中的问题

2 回答盒子模型——边框问题

搜索更多本课相关问答

盒子问题！！！

我要回答关注问题

热搜

最近搜索清空

盒子问题！！！

2 回答

本课相似问答

盒子问题！！！