我们都知道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 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦