[分享]css内边距算div高度

标签作为常用的文本容器，我们经常需要设置内边距（padding）来让文本与边框之间保持一定的距离，以达到更好的视觉效果。但我们设置内边距时，是否考虑过内边距如何影响标签的高度呢？下面我们来一起了解一下...

标签作为常用的文本容器，我们经常需要设置内边距（padding）来让文本与边框之间保持一定的距离，以达到更好的视觉效果。但我们设置内边距时，是否考虑过内边距如何影响标签的高度呢？下面我们来一起了解一下~

CSS内边距会对标签的高度产生影响，但有些时候我们却并不想产生影响。在CSS Box Model中，每个元素都由内容区域（content）、内边距（padding）、边框（border）、外边距（margin）四个部分组成。而浏览器默认的盒子模型（box-sizing）是content-box，即元素的高度由内容区域决定，不会考虑内边距、边框和外边距的面积。

如果我们想让标签的高度包含内边距，即高度 = 内容区域高度 + 内边距高度，则需要修改盒子模型为border-box。这样，元素的高度就会由内容区域、内边距、边框决定，而不是由内容区域单独决定。代码如下：

div {
  box-sizing: border-box;
  padding: 10px;
} 

上面的代码中，我们设置了div元素的box-sizing为border-box，此时内边距的高度将会和内容区域的高度一同被考虑在元素高度内，更好地适应页面变化。

需要注意的是，如果我们在设置元素高度时使用百分比，那么内边距也需要使用百分比。因为内边距是相对于包含块（containing block）计算的，如果高度是使用百分比设置的，则内边距的高度也需要使用百分比计算，否则会导致内边距高度的相对大小产生偏差。

总结一下，CSS内边距的高度会对标签的高度产生影响。如果想让内边距被纳入元素高度的计算中，需要将盒子模型设置为border-box。此外，在设置元素高度时使用百分比，内边距高度也需要使用百分比计算。