css如何将border线加到元素内部，占内边距，不占外边距

作者：System 时间：2024年08月14日分类：所有,css 字数：458

在CSS中，要将border线加到元素的内部，即元素的border占据内边距，可以使用box-sizing属性。将box-sizing设置为border-box可以确保元素的实际内容区域大小不变，border和padding都被包含在元素的宽度和高度之内。

以下是实现这一效果的CSS代码示例：




.element {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box; /* 关键点：border-box */
}

这段代码将创建一个100px×100px的正方形元素，其内容区域大小为100px - 2pxBorder - 2*10pxPadding = 68px，border和padding都从内容区域大小中减去。此外，border线不占外边距。