[分享]css内边距不占多余高度宽

CSS内边距不占多余高度宽CSS是网页布局中非常重要的一部分，它可以帮助开发者创建各式各样的样式效果，其中包括设置元素的内边距（padding）。而在使用CSS内边距时，有一些开发者会发现，元素的内边...

CSS内边距不占多余高度宽
CSS是网页布局中非常重要的一部分，它可以帮助开发者创建各式各样的样式效果，其中包括设置元素的内边距（padding）。而在使用CSS内边距时，有一些开发者会发现，元素的内边距并不会占用多余的高度与宽度。这是为什么呢？
首先，我们需要明确CSS内边距是指元素内容与元素边框之间的空间。通常，我们使用padding属性来设置元素的内边距大小，例如：

p {
  padding: 10px;
} 

在设置了内边距后，我们会发现元素内容周围出现了一定的空白区域。但是，这些空白区域并不会占用多余的高度与宽度，因为CSS的计算规则是基于盒模型（box model）的。
盒模型是指一个元素在网页中所占的空间大小，它由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分分别对应着元素盒子的四个边界。
在盒模型中，元素的宽度和高度是指内容区域的大小，因此设置元素的内边距并不会改变元素的宽度和高度。实际上，设置内边距只会让元素的内容区域缩小，同时增加内部空白区域的大小。
例如，如果我们设置一个宽度为100px的段落元素，然后给它设置10px的内边距，那么实际上该元素的内容区域就只有80px（100px - 2 * 10px）了。而外部看来，该元素的宽度仍然是100px。
因此，在进行网页布局时，我们需要注意内边距的设置对元素大小的影响。如果想要让元素大小随着内边距而扩大，可以考虑使用box-sizing属性将盒模型设置为border-box模式，这样设置内边距和边框宽度就不会改变元素的宽度和高度了。

p {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
} 

总结一下，CSS内边距并不会占用多余的高度与宽度，因为它遵循的计算规则是基于盒模型的。在进行网页布局时，我们需要注意内边距的设置对元素大小的影响，并考虑合理使用box-sizing属性进行控制。