设置内边距后块元素变大

发现问题

我们发现我们设置一个div的宽度和高度是100px，但是我们一旦设置内边距padding，它的高度和宽度就变大了，这是为什么呢？

盒模型

在css中，一共有两种类型和盒模型，这两种类型的盒子，宽高计算模式是不一样的。
那么在了解他们之前我们先看一个盒子

一个盒子的区域包括：内容区（蓝色）、内边距（绿色）、边框（黄色）、外边距（橙色）

我们的盒子模型有两种
1.外扩盒子
2.内缩盒子

外扩盒子
你遇到的就是外扩盒子，就是你设置的width、height为100px，是对蓝色区域的内容区设置的，加上内边距，最终的宽度高度一定比100px要大的多

设置外扩盒子的css代码

.div{
	box-sizing:content-box
}

内缩盒子
内缩盒子就是你想要的了，你设置的width、height为100px，这100px设置的是border+padding+content（内容区）总高度，
如果你设置width:100px，padding:10px，border:5px的话，内容区的宽度就会被压缩，它的宽度等于100px-10×2-5×2=70px。
你设置的内边距越大，它内容区就越挤压

设置内缩盒子的css代码

.div{
	box-sizing:border-box
}

解决问题的方法：设置box-sizing: border-box;