我们都知道padding 是边框和里面内容之间的间隙,但是在定宽、高的盒子里padding会撑开盒子。我们来看下面的例子:
代码:
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> *{ margin:0; padding:0; } div{ width:400px; height:400px; border:5px solid red; }</style></head><body><div></div></body></html>
不算边框宽高都为400px.png
padding等于100px后不算边框宽高都为600px.png
所以可以看出在css样式中定义的盒子的宽width、高height实际上是盒里内容的宽width、高height,不管盒子里有没有内容都会撑大盒子,对我这样的前端小白使用的时候真是要多注意啊!
附上一张关于盒子宽度的图:
盒子总宽度.jpg
声明:此文只代表个人见解,只供参考!联系QQ:1522025433
作者:暗恋桃花源丫
链接:https://www.jianshu.com/p/db5bd779d705
、
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦