在定宽的盒子模型中padding是往里挤内容还是外挤扩大盒宽
2017-08-30 本文已影响12人
暗恋桃花源丫
我们都知道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
