[分享]css内容与边框的间隙

CSS中，内容与边框间存在间隙，这被称为边框盒子模型，可进一步细分为标准盒子模型和IE盒子模型。标准盒子模型的尺寸就是元素的内容区域，而IE盒子模型的尺寸包含了边框和内边距。我们可以通过boxsizi...

CSS中，内容与边框间存在间隙，这被称为边框盒子模型，可进一步细分为标准盒子模型和IE盒子模型。

标准盒子模型的尺寸就是元素的内容区域，而IE盒子模型的尺寸包含了边框和内边距。我们可以通过box-sizing属性来指定使用哪种盒子模型。

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: content-box; /* 使用标准盒子模型 */
}

.box-ie {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: border-box; /* 使用IE盒子模型 */
} 

在上述代码中，两个盒子的宽高、padding和border都是一样的，但是由于使用了不同的盒子模型，它们的最终尺寸不同。使用content-box的.box元素，它的具体尺寸等于内容区域（即200px - 2 * 20px - 2 * 2px = 156px），使用border-box的.box-ie元素，它的具体尺寸等于框的完整宽度（即200px）。