css盒子模型 padding

CSS盒子模型是指在构建网页时，将网页布局看做是一系列的盒子组成的。每个盒子都占据着空间，并且由四个部分组成：margin、border、padding和content，它们分别代表着盒子之间的空隙、边框、内边距和内容。其中，padding是指盒子的内边距，也就是content区域和border之间的空间。

.box {
  padding: 20px;
  border: 1px solid black;
  margin: 20px;
}
 

在上述代码中，我们定义了一个名为“box”的div，它的内边距为20px。当给盒子添加内边距时，它的内容区域就会往内缩进，而且背景色和边框会被延伸到内边距的部分。也就是说，padding可以用来控制内容距离边框的距离和背景颜色的填充。

值得注意的是，当我们设置元素的height、width和padding时，元素实际真实的大小应该是由height和width以及padding大小的和构成，并非只有height和width。例如：

.box {
  height: 200px;
  width: 200px;
  padding: 20px;
  border: 1px solid black;
  margin: 20px;
}
 

在这个例子中，我们给盒子设置了200px的高和宽，并且设置20px的内边距。这时候，如果我们在Chrome浏览器中查看它的盒子模型，就会发现它的总宽度为240px，总高度为240px。也就是说，元素的实际大小包括了它的边框、内边距和内容大小。

总之，padding是CSS盒子模型中的一部分，它可以控制元素内部的空白区域，从而让网页布局更加美观和规整。对于初学者来说，熟练掌握盒子模型以及各个属性的作用，是构建优美网页的基础。