[分享]css内边距不被撑大

在 CSS 中，使用内边距（padding）是常见的布局技巧。但是，有时候你可能会发现 padding 不像你想象中的那样工作，它不会像 margin 一样撑大盒子的大小，而是会在盒子内部创建额外的空...

在 CSS 中，使用内边距（padding）是常见的布局技巧。但是，有时候你可能会发现 padding 不像你想象中的那样工作，它不会像 margin 一样撑大盒子的大小，而是会在盒子内部创建额外的空间。

这种情况可能会导致所谓的“盒子塌陷”，这意味着盒子高度被计算为其内部内容的实际高度，而不是带有内边距的高度。

此时我们可以使用 box-sizing 属性来解决这个问题。

 box-sizing: border-box; 

这个属性有三个值：

• content-box 默认值。盒子被计算为内容的宽度和高度，无论这些内容是否有内边距或边框。
• padding-box 盒子被计算为内容和内边距的宽度和高度，无论这些内容是否有边框。
• border-box 盒子被计算为内容、内边距和边框的宽度和高度。

当使用 border-box 时，任何设置的内边距和边框将被包含在盒子的总宽度和高度中。

现在你可以安心地在盒子中使用内边距了。