为了账号安全,请及时绑定邮箱和手机立即绑定

l为什么给li加padding之后会增加它的宽度

为什么给li加padding之后会增加它的宽度

正在回答

4 回答

因为定义盒子的宽度是以内容宽度来显示的,这个宽度就不包括padding和border,也就是说你设置20px宽度是给内容的宽度,再定义padding的话盒子就变宽了。 其实这个最主要是因为padding是算入背景里面的,不像是margin所以就会增大宽度。 css3有个box-sizzing属性可以规定宽度的计算范围,例如设置border-box这些如果设置100px宽度,那这盒子就是100px,不管你设多大的padding和border,都是100px。

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

刚好在看慕课网关于下拉菜单的视频。我看了一遍,觉的掌握了,可是当自己去敲代码的时候,反而出问题了。所以就慢慢研究了以下。恰好也是关于li 标签的宽度的问题。

关于题主的问题,作答如下:

第一中情况:如果你的 li 标签设置了固定宽度的话,当你再设置padding的时候,li 标签的占位宽度(content+padding+border+margin)肯定会增加。这一点上面那个人已经说的很清楚了。

第二种情况:没有设置 li 标签的宽度,但是为什么设置padding,li 标签的内容宽度(content)会增加呢?我也是碰到了这个问题。我发现当设置 li 标签的padding:0 10px;的时候;li 标签的内容宽度(content)就会在原有的基础上 增加20px,(content的宽度=li标签的原有宽度 + 20px)。这个知识点,你可以记以下。2017.07.12


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

刚好在看慕课网关于下拉菜单的视频。我看了一遍,觉的掌握了,可是当自己去敲代码的时候,反而出问题了。所以就慢慢研究了以下。恰好也是关于li 标签的宽度的问题。

关于题主的问题,作答如下:

第一中情况:如果你的 li 标签设置了固定宽度的话,当你再设置padding的时候,li 标签的占位宽度(content+padding+border)肯定会增加。这一点上面那个人已经说的很清楚了。

第二种情况:没有设置 li 标签的宽度,但是为什么设置padding,li 标签的内容宽度(content)会增加呢?我也是碰到了这个问题。我发现当设置 li 标签的padding:0 10px;的时候;li 标签的内容宽度(content)就会在原有的基础上 增加20px,(content的宽度=li标签的原有宽度 + 20px)。这个知识点,你可以记以下。2017.07.12

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

因为这个是内填充,加在里面的就像你吃东西一样,吃进肚子,吃多了肚子就变大了

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

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123848    人
  • 解答问题       838    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

l为什么给li加padding之后会增加它的宽度

我要回答 关注问题
微信客服

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

帮助反馈 APP下载

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

公众号

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