[分享]css内边距不增大盒子

    在设计网页样式时，我们经常需要使用CSS来调整盒子的内边距。但是有时候我们会发现，调整内边距后，盒子的大小也会跟着改变。这是因为CSS的默认盒模型会包含内边距在内。不过，如果想要内边距不影响盒...

    在设计网页样式时，我们经常需要使用CSS来调整盒子的内边距。但是有时候我们会发现，调整内边距后，盒子的大小也会跟着改变。这是因为CSS的默认盒模型会包含内边距在内。不过，如果想要内边距不影响盒子大小，我们可以使用CSS的另一种盒模型——border-box。

/*默认盒模型*/
box-sizing: content-box;

/*border-box盒模型*/
box-sizing: border-box; 

    默认盒模型(content-box)使盒子大小由内容(content)、内边距(padding)和边框(border)所组成。而border-box盒模型则是把内边距和边框包含在盒子的大小(width/height)内。这也就是为什么使用border-box的时候，调整内边距不会改变盒子大小了。

    在开发过程中，如果我们想让内边距不增加盒子大小，可以使用如下的CSS代码：

.box{
  box-sizing: border-box;
  padding: 20px;
  width: 300px;
  height: 200px;
  background-color: #ccc;
} 

    如上所示，box-sizing: border-box会使用border-box盒模型，padding: 20px会给盒子添加20像素的内边距，但是盒子大小不会改变。而width和height指定了盒子的大小，background-color是盒子的背景色。这样，我们就可以放心使用内边距来调整样式而不用担心盒子大小改变了。